一、下載nginx
使用的版本是：nginx-1.19.4.tar.gz
官網：http://nginx.org/en/download.html
百度網盤：
鏈接：https://pan.baidu.com/s/1knGWwg-Sk2CxtwnTqTgqqw
提取碼：t3fe
二、連接服務器（本人使用：SecureCRT）
1、創建nginx目錄：mkdir nginx
2、cd nginx
3、配置nginx安裝所需的環境
yum install gcc-c++ yum install -y pcre pcre-devel yum install -y zlib zlib-devel yum install -y openssl openssl-devel
4、使用sftp傳入壓縮包（SecureCRT 默認快捷鍵：Alt + P）
5、解壓縮
tar -zxvf nginx-1.19.4.tar.gz
6、進入加壓文件
解壓之后，進入加壓文件，即cd nginx-1.19.4
然后進行配置，推薦使用默認配置，直接./configure 就好了，如下圖所示：
7、編譯安裝nginx
首先在當前目錄（/usr/local/nginx-1.19.4）進行編譯。輸入make即可：
make
然后回車，如果編譯出錯，請檢查是否前面的4個安裝都沒有問題。
編譯成功之后，就可以安裝了，輸入以下指令：
make install
8、啟動nginx
進入/usr/local/nginx/sbin目錄，輸入./nginx即可啟動nginx
./nginx
如果啟動報錯：nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)，說明80端口被占用，使用如下命令：
fuser -k 80/tcp
關閉nginx
./nginx -s quit 或者 ./nginx -s stop
重啟nginx
./nginx -s reload
查看nginx進程
ps aux|grep nginx
9、設置nginx開機啟動
只需在rc.local增加啟動代碼即可。
vim /etc/rc.local
按鍵盤 i 然后在底部增加：
/usr/local/nginx/sbin/nginx
三、部署
1、打開vue項目，在控制台輸入
npm run build
2、在SecureCRT 進入nginx/html目錄，打開sftp
先刪除原來的index.html,再傳輸
3、把生成的dist目錄下的靜態資源傳輸到服務器
4、修改配置文件
此外，進入cd /usr/local/nginx/conf目錄可修改nginx的配置文件：
vim nginx.conf
按鍵盤i進行編輯，編輯完成按 Esc,再輸入 :wq
貼上一個完整版的，其中有序號標明的是注釋說明，主要更改了server 的內容
#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; server { listen 8080; # 這是你部署的ip server_name 127.0.0.1; # 這里配置你前段打包文件的映射路徑 root /work/dist; #charset koi8-r; #access_log logs/host.access.log main; location / { # root html; try_files $uri $uri/ /index.html; index index.html index.htm; } # 6、這里是解決跨域問題，將你后端的地址寫在proxy_pass 后面就可以了 location /api { # 下面這行也要改為api rewrite ^.+api/?(.*)$ /$1 break; proxy_pass http://127.0.0.1:8333/; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #} } }
說明：如果需要配置多個vue項目，只需添加多個server配置即可。
把nginx下面的另外一個server的注釋取消，再進行修改配置即可：
5、開放 8080 端口
1、檢查防火牆狀態
firewall-cmd --state
running 表示防火牆是開啟的，如果你看到的是 not running，則表示防火牆關閉，需要開啟 ：
systemctl start firewalld.service
2、開放 8080 端口
firewall-cmd --zone=public --add-port=8080/tcp --permanent
3、重啟防火牆
systemctl restart firewalld.service
4、重新載入配置
firewall-cmd --reload
6、在服務器也要開放端口
7、重啟nginx
在/nginx/sbin/目錄下
重啟：
./nginx -s reload
查看nginx進程：
ps aux|grep nginx