Nuxt4和Nginx布署上线 / 网络研习社#90

@lemooljiang · 2025-08-18 10:47 · HIVE CN 中文社区

nuxt4.jpg

Nuxt和Nginx是对好搭档,让应用布署上线那是手拿把掐的事。这次喵星上线比较顺利,一把就通了。只是在渲染上还有些小问题,不知是Hive节点的问题,还是前端没设计好,Nuxt4这个新版我也是第一次用。

布署上线两步曲:一是Nuxt打包,pm2运行应用,二是Nginx反向代理和https证书。

Nuxt打包

直接yarn build , 得到 .output文件,它就是运行的文件啰。进去后,直接node server/index.mjs即可。

用pm2托管。这步也很简单,pm2 start server/index.mjs --name miao, 有这步就可运行。在浏览器中http://localhost:3000就要打开应用了。

Nginx反向代理和https证书

  1. 前置条件:安装好Nginx,用certbot安装ssl证书。
  2. 设置conf文件,重点在location这块:
location / {
  proxy_pass  http://127.0.0.1:3000;
  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_http_version 1.1;
}

重启Nginx后就可访问应用啰!

#cn #cn-reader #miao #network-institute #frontend #nuxt #nginx #vue
Payout: 3.293 HBD
Votes: 41
More interactions (upvote, reblog, reply) coming soon.