VUE项目部署到阿里云服务器上

前言

实验室项目需要加一个网页前端，前段时间成功部署，这两天发现教程链接失效了，决定自己记录一下，方便以后回顾。

需要的东西

nginx
Xshell+Xftp

连接服务器

Xshell和Xftp连接服务器，主机名为服务器ip，账号密码对应
nginx下载到本地，再通过Xftp上传到服务器

安装gcc和g++编辑器

yum -y install gcc automake autoconf libtool make
yum install gcc gcc-c++

解压nginx安装包

tar -zxvf nginx-1.8.1.tar.gz

进入nginx-1.8.1目录

cd nginx-1.8.1

make编译安装它

./configure
make
make install

安装zlib库

cd ~
wget http://www.zlib.net/zlib-1.2.11.tar.gz
tar -zxvf zlib-1.2.11.tar.gz
cd zlib-1.2.11
./configure
make
make install

安装 SSL

yum -y install openssl openssl-devel

安装 pcre

yum -y install pcre-devel

安装 nginx

./configure
make
make install

nginx 服务的基本操作

启动服务

/usr/local/nginx/sbin/nginx

这个时候访问你服务器的公用 ip 地址，如果可以打开下面这样一个页面，说明 nginx 启动成功

重启服务

/usr/local/nginx/sbin/nginx -s reopen

查看服务

ps -ef | grep nginx

红框中的数字在停止服务时会用到

停止服务

kill 7332

查看配置

vi /usr/local/nginx/conf/nginx.conf

重新载入配置

在修改配置文件之后需要重新载入配置文件

/usr/local/nginx/sbin/nginx -s reload

打包vue项目并上传到服务器

执行 npm run build打包项目，打包成功之后，会在项目目录下多出一个dist文件夹，里面有一个static目录(存放有静态文件)和index.html，这就是打包以后的项目，用xftp把这个文件夹上传到服务器。待传输完成之后，打开xshell，运行

vim /usr/local/nginx/conf/nginx.conf

修改nginx的配置文件(vi里键入a进入编辑模式，修改完成后esc将光标移到文末，再键入:wq即可保存)

在server的location中配置站点根目录,修改完成之后需要重新载入配置文件

/usr/local/nginx/sbin/nginx -s reload

此时访问服务器ip地址就可以看到部署成功的项目了。

可能出现的问题及解决方法

404或405

vue配置了跨域，可能会导致访问出现404或405等错误，因为vue配置的跨域只能在本地生效，打包之后就失效了，给nginx配置跨域即可解决。

403

权限错误，将nginx.config的user设置为启动用户

nginx 报异常"/usr/local/nginx/logs/nginx.pid" failed (2: No such file or directory)

可能是nginx.conf的nginx.pid被注释了，把配置文件中pid前的#去掉保存退出重启即可