美文网首页
部署 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)

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