Nuxt.js 项目部署到Linux(ConterOS)服务器


部署环境搭建

ConterOS  v7.6.1810
nginx  v1.6.1
node  v12.15.0
npm  v6.13.4
pm2  v5.0.1

node 安装教程:https://www.zhangjiblog.com/archives/99.html
pm2 安装教程:https://www.zhangjiblog.com/archives/100.html

nuxt.js 项目编译打包

// 执行命令,对项目进行编译打包
npm run build

项目上传

在服务器创建项目文件夹,并将打包完成后的项目中的.nuxt、static、nuxt.config.js、package.json 上传至服务器

安装依赖

进入服务器项目目录,执行以下命令安装依赖

npm install

注意:若项目中引用了 node-sass ,在安装时可能会出现如下错误

gyp ERR! configure error 
gyp ERR! stack Error: EACCES: permission denied, mkdir '/Users/wqq/learning/suvery-system/node_modules/node-sass/build'
gyp ERR! System Darwin 19.4.0
gyp ERR! command "/usr/local/bin/node" "/Users/wqq/learning/suvery-system/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /Users/wqq/learning/suvery-system/node_modules/node-sass
gyp ERR! node -v v8.14.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
Build failed with error code: 1

此时的解决方案是先卸载 node-sass ,再执行如下安装命令

// 卸载命令
npm uninstall node-sass
// 安装命令
sudo npm install node-sass --unsafe-perm --save-dev

项目运行

普通运行

在服务器项目目录下执行如下命令,运行项目

npm start
或
npm run start

持久运行(pm2 进程守护管理)

在服务器项目目录下执行如下命令,运行项目

pm2 start npm --name "项目昵称(自定义)" -- run start
或
pm2 start npm --name "项目昵称(自定义)" -- start

配置nginx

默认安装过nginx,未安装可自行百度安装教程
进入服务器,新增nginx 配置如下(包含配置https):

upstream nodenuxt {
    server localhost:3000; #nuxt项目 监听端口
    keepalive 64;
}

server {
   listen 80;
   server_name  www.xxxxx.com; # 自己的域名
   rewrite ^(.*)$ https://$server_name$1 permanent; # 强制跳转https
}
server {
    listen       443 ssl;
    server_name  www.xxxxx.com;
    
    # 配置https 证书
    ssl_certificate       /etc/nginx/SSL/www.xxxxx.com/1_www.xxxxx.com_bundle.crt;
    ssl_certificate_key  /etc/nginx/SSL/www.xxxxx.com/2_www.xxxxx.com.key;

    ssl_session_cache    shared:SSL:1m;
    ssl_session_timeout  5m;

    ssl_ciphers  HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers  on;

    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://nodenuxt; #反向代理
    }

}

配置完成后,执行nginx -s reload 重载配置即可

完成上述操作后,即可在浏览器输入www.xxxxx.com 访问到部署好的页面

品码科技 官网,使用nuxt.js 搭建,并使用以上方式进行部署。

声明:张先生的博客|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - Nuxt.js 项目部署到Linux(ConterOS)服务器


选择自己所爱的,然后爱自己所选择的!