美文网首页
部署 Nuxt 应用(Nginx + PM2)

部署 Nuxt 应用(Nginx + PM2)

作者: limengzhe | 来源:发表于2022-10-04 22:31 被阅读0次

第一步:打包并拷贝至服务器

在本地项目的文件夹下执行 npm run build 进行打包,打包完成后将以下三个文件/文件夹拷贝至服务器,任意位置即可,比如 home/nuxtapp

.nuxt
package.json
/static

第二步:安装依赖

和 SPA 不同,Nuxt 应用打包后也需要安装依赖。

进入刚才的文件夹 home/nuxtapp,执行 npm i 命令安装依赖。如果服务器没有安装过 node,输入下面这个命令安装(CentOS)。

dnf module install nodejs:16

其中 16 是版本号

node 安装好后自带 npm,直接执行 npm i 即可。

npm i

第三步:运行服务

启动服务可以选择直接执行:

npm run start

但是这样可能存在服务挂掉的情况,一旦挂掉只能手动重启。所以推荐使用 pm2 进行启动,pm2 是一个进程守护管理器,可以管理和保持应用一直在线。

首先安装 pm2。

npm install pm2 -g

然后进入项目所在的文件夹,执行下面这个命令使用 pm2 启动服务。

pm2 start npm --name "your app name" -- run start

第四步:使用 nginx 代理

启动后的服务,默认运行在 localhost:3000,但这样外网是访问不到的,所以需要使用 nginx 进行代理。

如果没有安装 nginx,输入下面这个命令安装(CentOS)。

yum install nginx

安装后,找到 nginx.conf 所在的文件夹,并打开,添加以下监听。

server {
    listen       8000;
    server_name  localhost;

    location / {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Nginx-Proxy true;
        proxy_cache_bypass $http_upgrade;
        proxy_pass http://localhost:3000/;
    }
}

其中 8000 是端口号,可以任意输,80 也可以,9000 也可以,但记得在你的服务器防火墙上启用这个端口,不然是拒绝访问的。

修改之后保存,之后重启 nginx 服务即可(CentOS)。

systemctl restart nginx

重启后,访问 IP:8000 即可看到你的页面。将 IP 替换为你的服务器地址。

相关文章

  • 部署 Nuxt 应用(Nginx + PM2)

    第一步:打包并拷贝至服务器 在本地项目的文件夹下执行 npm run build 进行打包,打包完成后将以下三个文...

  • Nuxt

    Nuxt配置pm2部署的问题

  • nginx部署nuxt

    1.nuxt项目package.json的scripts字段配置 以下是mac os的配置 如果是windows ...

  • 云服务器 Linux > MongoDB > Doc

    原部署文章:云服务器 Linux + Meteor + Mogodb + PM2 + Docker + Nginx...

  • pm2部署应用到服务器-配置篇

    之前一直把pm2用来保持node持久运行在后台,今天应用下pm2 deploy ,将应用通过pm2来实现自动部署 ...

  • vue发布

    pm2 启动nuxt pm2 start npm --name "jsyfShopNuxt" -- run sta...

  • 通过pm2一键部署,nginx反向代理

    这里我不讲如何安装node、pm2的环境安装,只讲如何通过pm2一键部署,怎么通过nginx反向代理到pm2上。如...

  • 使用nginx,pm2,node部署vue,nuxt项目

    最近学习vue和nuxt,于是部署Vue和Nuxt项目到腾讯云上,因为项目涉及一些跨域请求,所以采用了Nginx代...

  • 部署-pm2

    pm2是部署nodejs项目的高大上工具,如何使用我们一一道来。 使用 安装pm2 启动应用 列出所有应用 查看资...

  • python应用部署

    应用部署 本项目采用nginx + uwsgi方式部署, 参考链接:nginx+uwsgi + superviso...

网友评论

      本文标题:部署 Nuxt 应用(Nginx + PM2)

      本文链接:https://www.haomeiwen.com/subject/mjapartx.html