【Linux】Nginx安装使用负载均衡及动静分离（前后端项目部署），前端项目打包

拼搏现实的明天。 2024-02-20 11:43 9阅读 0赞

###  ###

## 一、Nginx导言 ##

### 1、引言 ###

> **Nginx** 是一款高性能的 Web 服务器和**反向代理服务器**，也可以充当负载均衡器、HTTP 缓存和安全防护设备。它的特点是内存占用小、稳定性高、并发性强、易于扩展，因此在互联网领域得到了广泛的使用。
> 
> 总结出以下三点:
> 
> 1.  **负载均衡**：流量分摊
> 2.  **反向代理**：处理外网访问内网问题
> 3.  **动静分离**：判断动态请求还是静态请求，选择性的访问指定服务器

### 2、使用场景 ###

1.  Web 服务器：通过 Nginx 部署 Web 服务可以提升服务器的并发处理能力，降低响应延时和网络请求影响，同时支持多种负载均衡算法，能根据实际情况自动分配流量。
2.  反向代理服务器：Nginx 可以作为反向代理服务器，实现多个后端服务器的负载均衡，并且可以根据实际情况分配请求，有效提升后端服务器的并发处理能力。
3.  HTTP 缓存：Nginx 的 HTTP 缓存机制可以将经常访问的 Web 页面、图片、视频等静态资源缓存在本地，提高响应速度，降低服务器负载。
4.  安全防护设备：Nginx 可以通过配置实现 Web 应用的访问控制、DOS 攻击防护、IP 黑名单等功能。

### 3、Nginx的使用 ###

> **Nginx** 的使用和部署项目需要**注意的是，在部署项目之前，你需要了解你的项目的具体需求，并根据实际情况配置 Nginx**。同时，确保服务器已经**正确配置防火墙规则**，**以允许对应的访问端口**。此外，建议备份配置文件和项目文件，以防止意外情况发生。
> 
> 流程如下：
> 
> 1.  安装 Nginx：首先需要在服务器上安装 Nginx。具体的安装方法会因服务器操作系统的不同而有所不同，你可以参考 Nginx 官方文档或操作系统相关的教程进行安装。
> 2.  配置 Nginx：安装完成后，需要对 Nginx 进行配置。主要包括设置监听端口、配置服务代理、设置负载均衡、配置缓存等。Nginx 的配置文件位于 `/etc/nginx/nginx.conf` 或 `/usr/local/nginx/conf/nginx.conf`。你可以根据实际需求进行相应的修改。
> 3.  启动 Nginx：配置完成后，通过终端命令或者服务管理工具启动 Nginx，比如通过执行 `sudo service nginx start` 或 `/etc/init.d/nginx start` 来启动 Nginx。
> 4.  部署项目：将项目文件放置在 Nginx 的 Web 根目录下，根据需要创建对应的子目录。默认情况下，Nginx 的 Web 根目录在配置文件中的 `root` 参数指定，一般是 **`/usr/share/nginx/html`** 或 **`/var/www/html`**。
> 5.  配置项目访问：根据项目的需求，可以在 Nginx 的配置文件中添加对应的站点配置。主要包括设置域名和端口、指定访问路径、配置 HTTPS、设置访问权限等。
> 6.  重启 Nginx：项目部署完成后，需要重新加载 Nginx 的配置文件使其生效。通过执行 `sudo service nginx restart` 或 `/etc/init.d/nginx restart` **重新启动 Nginx**。
> 7.  测试访问：**在浏览器中输入 Nginx 服务器的 IP 地址或域名，加上对应的访问路径，如果能够正常访问项目页面，则说明部署成功**。

## 二、Nginx安装 ##

### 1、安装依赖 ###

> 一键安装4个依赖，执行命令等待安装完成！
> 
>     yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel
> 
> ![ed7bfe94d07c436dbbb7e85986feab42.png][]

### 2、下载解压安装包 ###

> 如果你下载好了可以用客户端工具拖拽进去
> 
> 没有下载好就执行以下命令，记得在你的放置的目录下执行。
> 
> 下载命令：wget http://nginx.org/download/nginx-1.13.7.tar.gz  
> 解压命令：tar -xvf nginx-1.13.7.tar.gz
> 
> ![9e85539228f343eea7273d4386eb71d3.png][]
> 
> ![5e507884bf1749d7b9f3063bfa1c37c0.png][]

### 3、安装nginx ###

> 1、**进入**解压后的**目录**进行安装：cd /nginx-1.13.7/
> 
> 2、**编译**，执行配置: 考虑到**后续安装ssl证书** 添加两个模块 等待加载完成！  
> 命令：./configure --with-http\_stub\_status\_module --with-http\_ssl\_module
> 
> ![e0f323ffd02342fda88d525f8510593f.png][]
> 
> 3、**安装**，等待安装完成！  
> 命令：make && make install
> 
> ![5f9199e1c2824be1967105100b4a57fd.png][]

### 4、启动 ###

> 进入 **/usr/local/nginx/sbin/** 目录下启动：cd /usr/local/nginx/sbin/
> 
> ![1df040f0ff77469db7c1c25bc8c1bd70.png][]
> 
> 启动：./nginx
> 
> 重启：./nginx -s reload
> 
> 关闭：./nginx -s stop
> 
> 或者，指定配置文件启动：./nginx -c /usr/local/nginx/conf/nginx.conf

### 5、测试 ###

> 安装**lsof**插件
> 
> 命令：yum install -y lsof
> 
> ![7376f1c22cb8426e87d6e0a6f670e533.png][]
> 
> 安装完成，使用命令：lsof -i:80
> 
> ![afb7e1d4cdff4954bcdf46bc0c2ec43b.png][]

### 6、设置防火墙端口 80 ###

> 启动防火墙：systemctl start firewalld
> 
> 设置端口 80：firewall-cmd --zone=public --add-port=80/tcp --permanent
> 
> 设置端口 8081：firewall-cmd --zone=public --add-port=8081/tcp --permanent
> 
> ![05bf22564f7c44c4897af9fce1c6920d.png][]
> 
> 更新防火墙规则：firewall-cmd --reload
> 
> 防火墙列表：firewall-cmd --zone=public --list-ports
> 
> firewall-cmd --reload && firewall-cmd --list-port
> 
> ![8d33f6d9de254bcca6ac84d045ff302e.png][]

### 7、访问 ###

> 使用我们的IP路径访问可以看到
> 
> ![e20f72c4885841d99c2b0484562a6e02.png][]

## 三、tomcat负载均衡 ##

![51f65d26098f439c8a15acb447fdc62f.png][]

### 1、准备工作 ###

> 确保你的tomcat的/apache-tomcat-8.5.20/webapps/里面没有任何不属于的项目及文件
> 
> ![5d2c7a879621411f88cb53719dc8cbb8.png][]

### 2、准备2个tomcat ###

> 准备两个tomcat，在你的根目录里面执行以下命令
> 
> ![efcd410de87044f096707d69a3f49477.png][]
> 
> 命令 复制：cp -r apache-tomcat-8.5.20/ apache-tomcat-8.5.20\_8081/
> 
> ![2188ce13ef924c94935bf8c14e19ab9c.png][]

### 3、修改端口 ###

> 进入第二个**tomcat/conf**里面**server.xml**文件进行端口的修改![fbd1c92f58eb4efca39d256577b15db7.png][]
> 
> 编辑文件：vim server.xml

> 为了避免两个的**tomcat**冲突，我们在这些地方都＋1
> 
> 1.  HTTP端口，默认8080，如下改为8081![bb3638757cce4e0ebee1d772de459dea.png][]
> 2.  远程停服务端口，默认8005，如下改为8006![341f00cd33c64cb48557405778a11105.png][]
> 3.  AJP端口，默认8009，如下改,8010![fe5186f5445a48c98aaa9666698fc257.png][]

### 4、测试端口 ###

> 我们在两个tomcat里面分别启动 ./startup.sh
> 
> ![56010a7256eb49bebc688f36d981e8fb.png][]

### 5、服务器的集群 ###

> 进入 cd /usr/local/nginx/conf/ 里面编辑**nginx.conf**文件
> 
> 编辑：vim nginx.conf
> 
> 添加以下代码
> 
>     #服务器的集群
>         upstream  tomcat_list {  #服务器集群名字
>             server    127.0.0.1:8080  weight=1;   #服务器1   weight是权重的意思，权重越大，分配的概率越大。
>             server    127.0.0.1:8081  weight=2; #服务器2   weight是权重的意思，权重越大，分配的概率越大
>         }
> 
> ![df5241316e3841a4959ab23b60a38695.png][]
> 
> 在里面注释**root**，添加**proxy\_pass http://tomcat\_list/;**
> 
> ![e0d8351724fa4edc8abd17d634dc0ac8.png][]

> 进入/usr/local/nginx/sbin/：cd ../sbin/
> 
> 重启nginx：./nginx -s reload
> 
> ![b2bb6e93051541a2bd2de8fe64943e2a.png][]

> 最后我们直接访问我们的IP地址可以看到
> 
> ![ff4ca1b77b4a426ea9a0539c445da768.gif][]

> **如果有一个服务器tomcat停掉了一个，就只会用另外一个了**

## 四、后端接口部署 ##

### 1、导入项目启动 ###

> 1.  用我们的客户端工具在我们两个tomcat中webapps文件夹里面都**放入**我们的**war包**。
> 2.  如果你的两个tomcat都是开启的状态我们在两个tomcat里面**停止运行**./shutdown.sh。
> 3.  然后我们再开启两个tomcat服务器./startup.sh。
> 4.  MySQL的数据可以查看[【Linux】Linux项目部署及更改访问端口号][Linux_Linux]。

### 2、测试 ###

> 我们访问我们的端口数据
> 
> ![3b7cf12314dd45e5bcc5d0b611058513.gif][]

##  ##

## 五、前端部署 ##

### 1、前端打包 ###

#### 1.1、简介 ####

> SPA（Single Page Application）是一种运行在单个页面上的 Web 应用程序，主要采用 JavaScript、Ajax 等技术动态加载页面内容，提供像桌面应用程序一样的用户体验。将前端 SPA 进行打包主要是为了加快页面的加载速度，减少资源请求次数，保证前端应用的快速响应。

#### 1.2、步骤 ####

> 1.  再打包之前记得运行一遍你的项目，以便出意外的麻烦操作。（确保项目运行没问题）
> 2.  在spa前端项目里面的**config/index.js**里面**build**里面修改assetsPublicPath![8f4160dc7dc549809a789d1122705fff.png][]
> 3.  。在build/utils.js里面添加publicPath。![78c5f6b96bef4509bba126835dfffdd9.png][]
> 4.  在你的前端**spa项目**的目录里面**cmd**进入命令窗口。![bb7543b2697042a4974693d3c0041256.png][]
> 5.  在命令窗口输入命令：npm run build![1a86e2ac832642af8549ec5c32b3e8d5.png][]
> 6.  在目录里面可以看到dist文件，里面是我们打包好的前端项目。

### 2、前端部署 ###

#### 2.1、导入\\解压文件 ####

> 1.  在**/usr/local/**里面新建一个**文件夹mypro**放入自己的前端项目**zip**。
> 2.  进入**mypro**里面
> 3.  解压前端
>     
>     1.  安装解压插件：yum install -y unzip![cd90335a839140f0b1f1770529322c18.png][]
>     2.  解压：unzip blog.zip![0901f12c88d64228bf78896dd6cb3d27.png][]

#### 2.2、配置 ####

> 在**/usr/local/nginx/conf/**编辑**nginx.conf**文件。
> 
> **静态资源配置**
> 
> 把**root** 的路径改成你解压的文件路径；注释**proxy\_pass**。
> 
> ![122a07ba8ce14d00a3952cc04ffdd389.png][]
> 
> 动态资源配置
> 
> 在下面添加保存；**^~/api/表示匹配前缀是api的请求，proxy\_pass的结尾有/， 则会把/api/\*后面的路径直接拼接到后面，即移除api**。
> 
>     location  ^~/api/ {
>     		proxy_pass http://tomcat_list/;
>     	}
> 
> ![42edbd3f220044a1a555a58a5eb764f8.png][]
> 
> 进入：cd /usr/local/nginx/sbin/
> 
> 重启nginx ：./nginx -s reload
> 
> 访问IP地址可以看到我们的前端
> 
> ![55820e63cf6f4cfabfbcfd135dc4ad3c.png][]

#### 2.3、加载映射关系 ####

> **看你的项目请求路径是什么，如果你的项目请求路径是对应的我们就可以不用修改**。![37bf2dd0389943baa5045fb36b18e199.png][]

> 我们进入我们主机的C:\\Windows\\System32\\drivers\\etc\\hosts文件进行编辑配置，**配置我们项目访问对应的访问路径配置成我们服务器对应的IP地址**。
> 
> ![efe526fa662d4f7ebd06a8219a92b7fa.png][]

#### 2.4、访问 ####

> 这样我们的主机就能访问了
> 
> ![20cd91af1b3543a4b77c913c9895dca5.png][]

[ed7bfe94d07c436dbbb7e85986feab42.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/b95a729a9b5c4c8399c58ff07dd61140.png
[9e85539228f343eea7273d4386eb71d3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/6b9481da548644b6be90409e69ae0010.png
[5e507884bf1749d7b9f3063bfa1c37c0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/39eb94c2a86148fd9ca6122edb8f5fae.png
[e0f323ffd02342fda88d525f8510593f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/95956b6fe60c4a3eb81b547015b50090.png
[5f9199e1c2824be1967105100b4a57fd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/5376617a4919405b81f2ed0e8bb5dc80.png
[1df040f0ff77469db7c1c25bc8c1bd70.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/4f644632a67a47869319ebb283b828c5.png
[7376f1c22cb8426e87d6e0a6f670e533.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/2d897628d1f64a998e51a311a1ae4680.png
[afb7e1d4cdff4954bcdf46bc0c2ec43b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/71a52fc2aa6d440aa61e00b0600a6cd2.png
[05bf22564f7c44c4897af9fce1c6920d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/7887e773616447d1a137cee2c2794aba.png
[8d33f6d9de254bcca6ac84d045ff302e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/10daecf3c2934f7c89ee4a04367b6daa.png
[e20f72c4885841d99c2b0484562a6e02.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/e9a056d1c51f419492d35f15a48165d2.png
[51f65d26098f439c8a15acb447fdc62f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/9a8da1a681c441e98ad66f79f689d774.png
[5d2c7a879621411f88cb53719dc8cbb8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/953cb0600a4b47f2ae85dd24344b89b5.png
[efcd410de87044f096707d69a3f49477.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/03f0593bc06648b0bd8f5b261a1ca8b7.png
[2188ce13ef924c94935bf8c14e19ab9c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/260eb24da240487898a35bb58252b10f.png
[fbd1c92f58eb4efca39d256577b15db7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/f8457db4871a491d9be5506286562b05.png
[bb3638757cce4e0ebee1d772de459dea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/a38a01d827734252b671bb4b4823d4fb.png
[341f00cd33c64cb48557405778a11105.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/eb9a0f6906934139991ad9031b360416.png
[fe5186f5445a48c98aaa9666698fc257.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/888594b6dcf748ebae636bc364229d8e.png
[56010a7256eb49bebc688f36d981e8fb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/766cb99b5719418aafcdfa12117dfa5e.png
[df5241316e3841a4959ab23b60a38695.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/0b09a3cc2512435186388d4921ce22b0.png
[e0d8351724fa4edc8abd17d634dc0ac8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/7baaa96c5e56489d8f79f64650301c81.png
[b2bb6e93051541a2bd2de8fe64943e2a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/bfe5ba234c2c45869855dfbd9929a672.png
[ff4ca1b77b4a426ea9a0539c445da768.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/44e21f15e04a4741a9bf2cbee043c65c.png
[Linux_Linux]: https://blog.csdn.net/weixin_74383330/article/details/134139141?spm=1001.2014.3001.5502
[3b7cf12314dd45e5bcc5d0b611058513.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/612b308110cd4923acb02be582b6a5cd.png
[8f4160dc7dc549809a789d1122705fff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/1c9c8c43be954ff6974cd46d8ae5a855.png
[78c5f6b96bef4509bba126835dfffdd9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/58f144f87d3c4860978e0601d23351c5.png
[bb7543b2697042a4974693d3c0041256.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/0460241aa97146ba809faa8b2bc3df2f.png
[1a86e2ac832642af8549ec5c32b3e8d5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/82397283ecce4f6ebda99232c05a121e.png
[cd90335a839140f0b1f1770529322c18.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/00876ac7bde44c0784d5fd40e5a58d3b.png
[0901f12c88d64228bf78896dd6cb3d27.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/de1c23b230b94098a1a3ba2a2c9fbbcb.png
[122a07ba8ce14d00a3952cc04ffdd389.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/1eaeb62a18aa407f992d15b42eeebbba.png
[42edbd3f220044a1a555a58a5eb764f8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/a7b85ef700d64c0e821714d3af746e6a.png
[55820e63cf6f4cfabfbcfd135dc4ad3c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/a184d0858e1a4242ad780b235f8a5a43.png
[37bf2dd0389943baa5045fb36b18e199.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/70f3da46579449179b04626d8d738698.png
[efe526fa662d4f7ebd06a8219a92b7fa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/7282cc96a6e74c03b58e63946a2e18a4.png
[20cd91af1b3543a4b77c913c9895dca5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/96cc23505581415fb49be73d30cb4df3.png