一、Nginx安裝

1、添加 nginx 官方提供的 yum 源(需要聯(lián)網(wǎng)且時(shí)間較長(zhǎng))

輸入命令：

rpm -Uvh http://nginx.org/packages/centos/7/x86_64/RPMS/nginx-1.14.2-1.el7_4.ngx.x86_64.rpm

2、使用 yum 安裝 nginx

輸入命令：

yum install nginx

注1：yum方式安裝nginx，它的安裝根目錄為/etc/nginx
注2：查看nginx版本
? ? ?輸入命令： rpm -qa | grep nginx

?小嘴一提：

Nginx的默認(rèn)端口號(hào)是80，所以在訪問項(xiàng)目輸入地址的時(shí)候是不需要添加端口號(hào)進(jìn)去的。

3、啟動(dòng)及設(shè)置開機(jī)啟動(dòng)

輸入命令：?

?systemctl start nginx.service
?systemctl enable nginx.service

檢查80端口有沒有在使用

輸入命令：lsof -i:80

4、?設(shè)置防火墻開放 80 端口

輸入命令（依次輸入）:?

?firewall-cmd --zone=public --add-port=80/tcp --permanent
?firewall-cmd --reload && firewall-cmd --list-port

【小嘴一提：如果想同時(shí)啟動(dòng)兩條命令，中間請(qǐng)用 && 連接】

5、測(cè)試 nginx 是否可被訪問，應(yīng)該顯示nginx的歡迎界面

? http://服務(wù)器IP地址:80/

二、tomcat負(fù)載均衡 ?

1、準(zhǔn)備2個(gè)tomcat

第一個(gè)在前面部署后端的時(shí)候已經(jīng)創(chuàng)建。

第二個(gè)：復(fù)制前面第一個(gè)tomcat

輸入命令：

cp -r apache-tomcat-8.5.20/ apache-tomcat-8.5.20_8081/

2、第2個(gè)修改的配置如下

在Tomcat里conf文件中的servl.xml中修改配置?。

①. HTTP端口，默認(rèn)8080，如下改為8081

②.遠(yuǎn)程停服務(wù)端口，默認(rèn)8005，如下改為8006

③.AJP端口，默認(rèn)8009，如下改,8010

3、?設(shè)置防火墻開放 80 端口

輸入命令（依次輸入）:

?firewall-cmd --zone=public --add-port=8081/tcp --permanent
?firewall-cmd --reload && firewall-cmd --list-port

4、測(cè)試訪問

啟動(dòng)兩個(gè)Tomcat?

http://192.168.195.139:8080/

http://192.168.195.139:8081/

5、Nginx配置文件?

為了測(cè)試同一個(gè)網(wǎng)址可能會(huì)請(qǐng)求不同服務(wù)器，在不同的服務(wù)器中部署的是同一個(gè)項(xiàng)目，對(duì)于用戶而言是感知不到的。所以我們將8080和8081服務(wù)器的index.jsp首頁(yè)稍稍修改一個(gè)方便大家更直觀的感受區(qū)別！

5.1.查看nginx程序目錄

systemctl status nginx

查看nginx.conf文件內(nèi)容

cat? /etc/nginx/nginx.conf

5.2、編輯 /etc/nginx/路徑下的nginx.conf配置文件?

upstream  tomcat_list {  #服務(wù)器集群名字
	server    127.0.0.1:8080  weight=1;   #服務(wù)器1   weight是權(quán)重的意思，權(quán)重越大，分配的概率越大。
	server    127.0.0.1:8081  weight=1; #服務(wù)器2   weight是權(quán)重的意思，權(quán)重越大，分配的概率越大
} 

5.3、 編輯?/etc/nginx/conf.d/ 路徑下的 default.conf 配置文件

location / {
      #root   /usr/share/nginx/html;
      #proxy_pass   http://172.17.0.3:8080;
      proxy_pass   http://tomcat_list;
      index index.html index.htm;
  }

?這兩步就是實(shí)現(xiàn)了訪問Nginx192.168.26.128:80跳轉(zhuǎn)至配置好Tomcat_list的兩個(gè)服務(wù)器中6）

重啟Nginx服務(wù)，讓配置生效

systemctl restart nginx

訪問Nginx192.168.26.128:80（80端口是唯一可以不用帶的端口號(hào)）?

發(fā)現(xiàn)出錯(cuò)，我們打開日志文件查看錯(cuò)誤

5.4、查看nginx的訪問日志和錯(cuò)誤日志

cat /var/log/nginx/access.log
cat /var/log/nginx/error.log?

分析錯(cuò)誤的解決方法：

setsebool -P httpd_can_network_connect 1?

一定要進(jìn)入/etc/nginx/conf.d/目錄下才有用?。?！

?執(zhí)行完這個(gè)命令我們?cè)偎⑿略L問Nginx的頁(yè)面：它就可以實(shí)現(xiàn)訪問Nginx但是均衡分配訪問兩個(gè)Tomcat服務(wù)器上面去了，這樣的話就算我們停止一個(gè)Tomcat服務(wù)器也能訪問.

?

?三、部署前端項(xiàng)目

1、確保前臺(tái)項(xiàng)目能用

2、將前臺(tái)項(xiàng)目打包

npm run build? ? ? ? 【測(cè)試本地項(xiàng)目打包后沒問題】

?注意1：打包會(huì)遇到的問題1：hbuilderX打包vue項(xiàng)目白屏問題

?將項(xiàng)目目錄下的config文件夾里的index.js文件中,將build對(duì)象下的assetsPublicPath中的“/”，改為“./”后，再打包生成的 dist 文件。

build: {
    // assetsPublicPath: '/',//修改前
    assetsPublicPath: './',//修改后
}

??注意2：hbuilderX打包項(xiàng)目，element-ui的icon圖標(biāo)無法正常顯示

找到build文件的utils.js 中有打包的路徑，看看generateLoaders();Extract CSS when that option is specified, 指定該選項(xiàng)時(shí)提取CSS發(fā)現(xiàn)少了個(gè)公共路徑，加上pubilcPath

if (options.extract) {
     return ExtractTextPlugin.extract({
       use: loaders,
       fallback: 'vue-style-loader',
       // 解決icon路徑加載錯(cuò)誤
       publicPath:'../../'
     })
   } else {
     return ['vue-style-loader'].concat(loaders)
   }

3、?做ip/host主機(jī)映射

?將虛擬機(jī)ip映射域名www.zking.com

方法：

C:\Windows\System32\drivers\etc\hosts中增加映射關(guān)系

192.168.26.128?www.zking.com??

4、完成Nginx動(dòng)靜分離的配置文件default.conf的相關(guān)配置

定義規(guī)則：URL符合xxx標(biāo)準(zhǔn)走動(dòng)態(tài)請(qǐng)求，不符合走靜態(tài)請(qǐng)求。

更改第一個(gè)：靜態(tài)的資源加載以及域名

  listen       80;            #監(jiān)聽80端口，可以改成其他端口
    #server_name  localhost;    #當(dāng)前服務(wù)的域名
    server_name  www.zking.com; #當(dāng)前服務(wù)的域名(虛擬域名也可以)
    root         /usr/local/mypro/dist;      #將要訪問的網(wǎng)站的根目錄，nginx節(jié)點(diǎn)會(huì)自動(dòng)繼承父節(jié)點(diǎn)的配置;這里放到/usr/local/*，放到其他路徑下會(huì)有權(quán)限相關(guān)問題；必要的時(shí)候配置Nginx.conf的user為root。

更改第二個(gè)動(dòng)靜分離的區(qū)分：

 location / {
            #該句代碼是為解決history路由不能跳轉(zhuǎn)的問題，在vue-router官網(wǎng)有介紹 
        try_files $uri $uri/  /index.html;
    }
    location  ^~/api/ {
        #^~/api/表示匹配前綴是api的請(qǐng)求，proxy_pass的結(jié)尾有/， 則會(huì)把/api/*后面的路徑直接拼接到后面，即移除api
        proxy_pass http://tomcat_list/;
    }

5、重啟Nginx更新配置

?systemctl restart nginx

6、將前臺(tái)項(xiàng)目打包

npm run build? ? ? ? ?【配合Nginx】

注意：修改action.js 地址，添加api的路徑配置

'SERVER': 'http://www.zking.com/api/T216_SSH', //服務(wù)器，然后重新打包

7、將前端構(gòu)建好的dist項(xiàng)目，上傳到云服務(wù)器/usr/local/...只能放這里

小編在這里就專門建一個(gè)文件夾來放置這個(gè)前臺(tái)打包好的文件

mkdir mypro創(chuàng)建文件命令

?

8、www.zking.com完成整個(gè)前后端分離項(xiàng)目的測(cè)試

文章來源地址http://www.zghlxwxcb.cn/news/detail-425197.html

到了這里，關(guān)于Linux如何使用Nginx部署前端項(xiàng)目的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！