Nginx部署Vue项目

一、准备工作

下载 Xshell 连接阿里云服务器
下载 Xftp 便于管理文件和上传文件
打包好 vue 项目，出现一个dist文件夹，注意里头使用绝对路径

二、安装Docker

我的阿里云服务器装的 CentOS 系统，使用命令安装：

官方：

1	curl -fsSL https://get.docker.com \| bash -s docker --mirror Aliyun

国内：

1	curl -sSL https://get.daocloud.io/docker \| sh

启动 Docker：

1	sudo systemctl start docker

三、通过 Docker 安装 Nginx

1	docker images ------------列出本地镜像

先查看下本地镜像，没有结果，因为还没有镜像，但也说明了我们 Docker 已经安装成功

1	docker search nginx ------------找到nginx相关镜像服务，后头是介绍

1 2	docker pull nginx ------------安装nginx docker images ------------安装后再次查看

启动该镜像，使用nginx服务，代理本机8080端口（服务器安全组需要开放8080端口）

docker run -d -p 8080:80 --name nginx-8080 nginx

-d: 后台运行
8080: 服务器端口
80： nginx端口
nginx-8080: 取容器名为此
nginx: 镜像名

1	docker ps ------------查看安装的容器，安装后会有一个id号

Docker 命令：

docker images                ------------列出本地镜像
docker ps                    ------------列出容器(跑着的)
docker ps -a                 ------------列出容器(跑+没跑)
docker stop nginx-8080       ------------停止名为nginx-8080的服务
docker restart nginx-8080    ------------重启

在浏览器访问服务器 ip：8080 出现该图说明成功

四、将vue项目上传到服务器上

1
2
3

/usr/local/nginx/sbin             ------------里头的nginx用于启动
/usr/local/nginx/conf/nginx.conf  ------------配置文件
ps -ef | grep nginx               ------------查看安装目录

用 Xftp 把 dist 文件夹上传到服务器，注意不要放在/root下，nginx访问不到root

vim /usr/local/nginx/conf/nginx.conf
进入配置文件，按 i 进入编辑模式，按 Esc 退出编辑
:q    退出
：wq  保存操作退出

重启服务：(每次修改完都要保存重启)：

让服务定位到配置文件：
/usr/local/nginx/sbin/nginx -t -c /usr/local/nginx/conf/nginx.conf

重启：
cd /usr/local/nginx/sbin/
./nginx -s reload

打开浏览器访问公网地址，就能看到界面啦！！！

五、错误总结

404     ------------找不到文件，配置文件中 try_files未指定文件
500     ------------路径对了，服务无法访问，因为文件放在/root里了
访问后页面白屏  ------程序里没有是绝对路径
有的页面部分图片加载不出   -------应该是我的服务器配置不够

参考文档：
部署：
https://blog.csdn.net/longqizhanshen/article/details/106963318
https://www.jianshu.com/p/05f889faa74b
报错：
https://blog.csdn.net/weixin_43465090/article/details/89027047
https://blog.csdn.net/qq_43059674/article/details/110296807
https://blog.csdn.net/Xu_JL1997/article/details/105751623

我们的项目是前后端分离，这样的话，就把8080端口占用掉了，需要把后端换个端口