1、切换到服务器的home目录下,并新建文件夹simeple-website-frontend:
cd /home
mkdir simple-website-frontend
2、在本地的simple-website/frontend/dist目录下执行如下命令,把打包生成的文件放入服务器对应目录下:
scp -r ./* root@服务器ip:/home/youtube-front-pro
3、修改配置文件/etc/nginx/nginx.conf的部分内容,在http中增加server如下:
http {
server {
# 监听47.92.193.196:8080端口
listen 8080;
server_name 47.92.193.196;
# 访问 / 时 请求 root下的资源
location / {
root /home/youtube-front-pro;
index index.html index.htm;
# 解决刷新页面跳404的问题
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
补充:NGINX部署完项目后刷新就变成404的解决办法
location / {
root /www/wwwroot/phm/phmweb;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
4、nginx服务启动
nginx -t // 检验配置是否正确
nginx -s reload // 重新加载修改的配置
service nginx restart // 重新启动
之后,访问http://xxx.xxx.xxx.xxx:8080/,看到静态页面 就表示成功啦。
但此时 还不能正常请求服务端接口 需要下面第5步 完成 nginx 反向代理 才可以
http://47.92.193.196:8080/
5、配置nginx 转发 服务端接口
以后端接口 是http://47.92.193.196:7001 为例
location /api {
proxy_pass http://47.92.193.196:7001;
proxy_set_header Host $proxy_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
完整配置:
server {
listen 8080;
server_name 47.92.193.196;
location / {
root /home/youtube-front-pro;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# 通过反向代理 去转发后端接口请求, 后端接口 需有api前缀
location /api {
proxy_pass http://47.92.193.196:7001;
proxy_set_header Host $proxy_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
此时 访问静态页面 可以正常调用后端接口