nginx服務器部署dist文件夾

Table of Contents generated with DocToc

• 1、tomcat部署的問題
• 2、centos服務器安裝nginx
• 3、nginx配置
  • 3.1 將dist文件夾上傳到服務器
  • 3.2 配置nginx.conf
  • 3.3 啓動nginx

最近由於項目須要，我要把vue-cli打包後的dist文件夾部署到阿里雲服務器，這個真的整了我好久好久。。。從最開始使用 tomcat 服務器部署，到後面使用 nginx 服務器部署。

1、tomcat部署的問題

我把dist文件夾中的內容放到 tomcat/webapps/ROOT下：

而後運行tomcat，發現靜態文件是沒有問題的，可是請求後端接口的時候報404錯：

在網上找了不少辦法，有很多人遇到這個問題，可是基本都沒有詳細的解決方案，後面看到有博客說能夠試試用nginx反向代理的方式，而後纔有了後續解決辦法。

2、centos服務器安裝nginx

centos7服務器使用命令安裝環境：

yum -y install gcc pcre-devel zlib-devel openssl openssl-devel

nginx下載地址：http://nginx.org/download/nginx-1.14.2.tar.gz

而後解壓到對應目錄：

tar -zxvf nginx-1.14.2.tar.gz


進入nginx文件夾，執行以下命令：
./configure
（網上也有說：./configure --prefix=/usr/local/nginx【安裝目錄】），可是我這裏prefix報錯了

而後：
make
make install

基本安裝就完成了【目錄結構以下】：

3、nginx配置

3.1 將dist文件夾上傳到服務器

我將dist文件夾放到/home/dist

3.2 配置nginx.conf

server {
        listen       8083;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        location / {
            root /home/dist;
            index  index.html index.htm;
        }
        location /api{
             rewrite  ^/api/(.*)$ /$1 break;
             proxy_pass http://localhost:8091;
        }
    }

listen：表示監聽端口8083

location：dist文件夾放置的位置

/api：由於vue前端代理的時候，用的是api作名字，因此咱們要在此處配置後端api端口：

//vue代理
proxyTable: {
      '/api': {
        target: 'http://localhost:8091',
        pathRewrite: {'^/api': ''}
      }
    },

至此上述配置已完成。

3.3 啓動nginx

定位到/home/nginx-1.14.2/objs文件夾下，能夠看到裏面的結構爲：

nginx文件即爲啓動文件，咱們有以下基礎命令可使用：

命令	做用
./nginx -c /home/nginx-1.14.2/conf/nginx.conf	啓動nginx【攜帶配置文件】
./nginx -s reload	當配置文件更改時，可使用此命令重啓nginx
ps -ef|grep nginx2	查看當前nginx進程

咱們使用啓動命令便可便可

以後即可以在對應ip的8083端口號訪問了