部署vue +koa+nginx前后端分离项目到服务器

部署vue +koa+nginx前后端分离项目到服务器

因为遇到很多坑,百度了很多,记录一下,方便以后回看,也希望这篇文章能够帮到需要的人

先上正确部署，

1. 部署前先确保本地可以跑起来，在打包前对自己项目的修改=>把baseurl 修改成自己的ip地 址，原来可能类似这样

   // axios 配置接口默认路径
   axios.defaults.baseURL = 'http://127.0.0.1:8888/api/'
   

2. cd到自己的项目目录下 npm run build 就行打包，右侧就会出来打包后的文件夹dist，这些是自己的静态资源。前端到这里打包完成。在自己的服务器上新建个文件夹例如/www/demo，这个目录就是我们网站的根目录了。可以选择通过xshell 自带的xftp，也可以直接用宝塔面板把本地的dist文件夹上传到服务器。

3. 这里使用的是阿里云服务器，通过xhell 连接操作服务器，并且使用宝塔Linux操作面板方便安装一些环境，对新手十分友好，就像软件商店一样简单。

4. nginx 的安装，nginx是一个开源的，支持高性能，高并发的www服务和代理服务软件。宝塔操作面板软件商店一键安装，我们只需要关心nginx的配置问题
   

5. nginx的使用cd /usr/local/nginx/sbin。一些命令./nginx 启动，./nginx -s stop 停止，./nginx -s reload 重启，当修改完配置文件记得重新启动nginx

6. nginx的配置，nginx.conf 。可以通过vim /etc/nginx/nginx.conf编辑

   server
   {
       listen 80;  #监听的端口号
       server_name #自己服务器的ip地址;  
       index index.html index.htm index.php;  #默认页面
       root  /www/demo/dist; # 自己项目的根目录，不知道的看上的打包
   

7. 部署后端项目，把本地文件夹上传至服务器，本地原来是通过node app.js来运行一个服务部署到服务器，也就相当于在服务器上运行一个进程。注意需要端口号的开放。去阿里云的实例控制台对安全组就行管理，开放你需要的端口号。查看正在运行的端口netstat -ntlp常用。

8. 使用pm2 管理后端接口，
   安装pm2

   npm install pm2 -g
   

   开启服务pm2

   pm2 start app.js                //启动app.js应用
   

   停止服务

   pm2 stop all               //停止所有应用
   pm2 stop [AppName]        //根据应用名停止指定应用
   pm2 stop [ID]             //根据应用id停止指定应用
   

   自启动 pm2 startup

完结

---

因为在项目中使用了WebSocket,部署是遇见这个报错,

WebSocket connection to 'ws://*********' failed: Error in connection establishment: net::ERR_CONNECTION_TIMED_OUT

解决方案 : 运行下面代码关闭防火墙

systemctl stop firewalld.service