vue 项目部署到阿里云服务器

这篇博客是源于朱敏的信息可视化这门课，我和胡负责前端，应老师要求需要将前端部署到云服务器上。于是有了这篇的记录过程。

使用的阿里云的一个月免费的服务器，服务器系统是CentOS.

记录第一次Vue项目部署到阿里云Linux服务器艰辛之路

一、在win10上面安装Xshell和Xftp

Xshell + Xftp --windows平台远程终端解决方案

前者负责远程连接服务器

后者提供一个Win10和服务器之间文件传输的一个支持

二、在服务器Linux上面安装Nginx服务器

当浏览器中可以出现Ngnix的欢迎界面时，表明部署成功。

三、使用npm run build命令打包Vue项目，自动生成一个dist文件夹

四、将上述生成的那个dist文件夹部署到Linux的Nginx服务器中

其实就是用Xftp在linux服务器中的/var路径下面创建一个新的文件夹（根据自己情况自定义），用来放前面build生成的dist文件。我这里新建文件夹是DonorsChoose。然后将win10中Vue项目路径下生成的dist文件夹复制到Linux服务器 /var/DonorsChoose/下面。

五、修改Nginx中的配置文件

i --->进入编辑模式，修改location中的内容。---> Esc  --->接着     :wq   --->退出该配置文件，返回到命令行

六、kill掉Nginx进程，并重新启动nginx。（刚开始因为没有kill，导致一直浏览器访问服务器IP出现的都是Nginx的欢迎页面，看不到自己的项目页面）

使用下面命令查看linux服务器上有没有nginx的进程。

ps -ef | grep nginx

结果：有相关进程，需要kill掉，然后重新启动nginx。

 

杀死Nginx进程：

kill -9 Nginx运行的进程号

重新启动Nginx：

sudo systemctl enable nginxsy
sudo systemctl start nginx
sudo systemctl status nginx

最后一步就是在浏览器中输入linux服务器的IP就可以访问到Vue项目的页面了！