部署檔案
完整的前端部署檔案請點 這里
安裝nginx
配置靜態資源之前，需要先安裝nginx服務器，
apt-get install nginx
啟動nginx
service nginx start
其它命令：
nginx -v # 查看版本號
nginx -s stop #關閉
nginx -s reload #修改組態檔后重新加載
默認的安裝目錄 : /etc/nginx
打包前端資源
打包之前需要將前端介面的地址，修改為服務器的ip地址，
打包環境
npm run build:prod
可以看到，在專案的dist檔案夾下，生成了相應的靜態資源，
登錄linux服務器，創建存放靜態資源的目錄，
mkdir -p /home/liankang/projects/liankang-ui
將dist檔案夾下的所有檔案，上傳到該目錄下，
修改nginx組態檔：
cd /etc/nginx
cp nginx.conf nginx.conf.bak ## 修改組態檔之前，請先備份（這是個好習慣）
在nginx.conf中添加如下內容：
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
charset utf-8;
location / {
root /home/liankang/projects/liankang-ui;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
location /prod-api/{
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://10.0.0.58:8080/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
重啟nginx：
nginx -s reload
就可以正常訪問了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/347288.html
標籤：其他