nuxt前端部署

需求:部署测试环境
工具:阿里云安全规则开启端口(后端20001)、transmit(连接器)
参考:针对vue项目-连接器使用参考(所有的文件都压缩为zip放在服务目录下)
准备:先运行本地项目,查看项目本身是否可以启动

服务上的项目

  • 项目中所有文件打包压缩一个zip,放在你自己在服务下新建的目录文件夹下
  • 命令解压:unzip 文件名称 (要进入该服务目录下再进行该命令解压)
  • 初始化项目:npm install (安装项目插件)
  • 运行项目:npm start (启动服务上的项目)

nuxt项目配置

  • 本地端口(解决本地运行时默认3000端口被占用问题)
//package.json配置本地接口
  "config": {
        "nuxt": {
            "host": "0.0.0.0",
            "port": "20001" //写与冲突的端口号不同的端口
        }
    }
  • 服务指定端口(解决服务运行时端口冲突问题)
//nuxt.config.js配置服务接口
export default {
  server: {
    port: 20001, // default: 3000
    host: '0.0.0.0', // default: localhost
  },
  // other configs
}
  • nginx服务的配置文件

    • 启动服务
    cd /usr/local/nginx/ //这个是默认路径/usr/local/nginx/
    service nginx restart (reload)//重新启动(重新加载)
    killall -9 nginx //杀死所有nginx进程
    
    • 配置全局的nginx.conf配置文件(一般不在全局配置需要新建一个nginx配置文件:/usr/local/nginx/conf.d文件夹下创建web.conf配置文件)
    //nginx.conf配置文件默认路径 : /usr/local/nginx/conf
    http { //有可能有多个项目,所以不建议在全局服务的配置文件配置,可以在全局中如下方式配置多个分支文件
        include /usr/local/nginx/conf.d/advert.conf;
        include /usr/local/nginx/conf.d/web.conf; 
    }
    
    • 配置nginx配置分支文件web.conf
    server {
        listen    20001; //这个是监听端口(可以和服务端口不一致)
        server_name  127.0.0.1;
        root  /home/advert/web_test;  //项目在服务目录的路径
        location / {
             proxy_pass http://127.0.0.1:20001; //反向代理端口(服务端口)
        }
        //静态文件处理
        location ~ ^/(images|javascript|js|css|flash|media|static)/ {
            expires 30d;
        }
    	//错误页面处理
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    
    }
    
	//修改nginx配置文件需要重新运行nginx
 	/usr/local/nginx/sbin/nginx -s reload

pm2监控后端进程,如果报错会自动终止进程

就算是停止项目也可以访问网址:避免是窗口直接启动命令,关闭窗口就会断开远程访问

1.在服务器中安装 pm2:npm i pm2 -g(全局安装,只要安装了node环境便可直接运行该命令)

2.启动项目:pm2 start npm --name "web_test" -- run start

3.查看运行项目:pm2 ls

4.重启项目:pm2 restart ip名称

5.停止项目:pm2 stop ip名称

6.删除项目:pm2 delete ip名称
	
上一篇:Electron中实现通过webview实现内嵌网页并嵌入css样式和js脚本等


下一篇:nuxt.js入门-01