nginx部署nuxt

1.nuxt项目package.json的scripts字段配置

以下是mac os的配置

"dev": "nuxt",
"build": "nuxt build",
"start:dev": "NODE_ENV=development nuxt start --port 3001",
"start": "nuxt start --port 3000",

如果是windows os则安装cross-env模块

"dev": "nuxt",
"build": "nuxt build",
"start:dev": "cross-env NODE_ENV=development nuxt start --port 3001",
"start": "nuxt start --port 3000",

2.nginx配置

路径:/etc/nginx/nginx.conf


主要参考以下server字段


server_name要写自己的域名


#user  nobody;
worker_processes  1;
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#pid  logs/nginx.pid;
events {
  worker_connections  1024;
}
http {
  include       mime.types;
  default_type  application/octet-stream;
  sendfile        on;
  keepalive_timeout  65;
  #gzip  on;
    server {
        listen       80;
        server_name  xxxx.com www.xxxx.com;
        location / {
                proxy_redirect off;
                proxy_set_header Host               $host;
                proxy_set_header X-Real-IP          $remote_addr;
                proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto  $scheme;
                proxy_read_timeout          1m;
                proxy_connect_timeout       1m;
                proxy_pass                          http://127.0.0.1:3000; # 监听node 3000端口即正式环境
        }
    }
  server {
      listen       80;
      server_name  test.xxxx.com www.test.xxxx.com;
      location / {
          proxy_redirect off;
          proxy_set_header Host               $host;
          proxy_set_header X-Real-IP          $remote_addr;
          proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto  $scheme;
          proxy_read_timeout          1m;
          proxy_connect_timeout       1m;
          proxy_pass                          http://127.0.0.1:3001; # 监听node 3001端口即测试环境
      }
      error_page   500 502 503 504  /50x.html;
      location = /50x.html {
          root   html;
      }
  }
}

配置好后重启nginx(下面有教程)

3.上传相关文件到服务器

1.打包

 npm run build

2.上传


上传文件

4.pm2开启node服务

进入上传目录,然后再执行以下命令

npm i
npm i pm2 -g
pm2 start npm --name "prod" -- run start
pm2 start npm --name "test" -- run start:dev

5.面板监听

进入https://keymetrics.pm2.io/
按照指示在服务器执行

pm2 link xxx xxx 
面板

6.其他有用的命令

查看nginx开放的端口

sudo netstat -anp | grep nginx

强制关闭nginx

pkill -9 nginx

重启nginx

sudo nginx -s reload

删除文件夹/文件

rm -rf

get到的童鞋点个赞吧 -_-/

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 前段时间刚好公司有项目使用了Nuxt.js来搭建,而刚好在公司内部做了个分享,稍微再整理一下发出来。本文比较适合初...
    fengxianqi阅读 20,324评论 3 22
  • 最近学习vue和nuxt,于是部署Vue和Nuxt项目到腾讯云上,因为项目涉及一些跨域请求,所以采用了Nginx代...
    这个前端不太冷阅读 10,868评论 2 2
  • Nginx是一个轻量级的,高性能的Web服务器以及反向代理和邮箱(IMAP/POP3)代理服务器。它运行在UNIX...
    JaeGwen阅读 5,812评论 0 20
  • nuxt&pm2:零停机部署 中文版: nuxt是一个非常棒的vue.js框架,它使得建立ssr站点变得非常简单。...
    believedream阅读 5,888评论 1 1
  • 若叫我的双眼 一眼看着爱情,一眼看着生活 那必使我的心慌乱失衡 但我无从闪避 谁叫这世界的颜色只此两种 那痛苦而深...
    狂生小乙阅读 2,817评论 0 1

友情链接更多精彩内容