当前位置:   article > 正文

jenkins部署nuxt项目,pm2开启服务端渲染_nuxt3项目jenkins部署

nuxt3项目jenkins部署

流程:

1、使用nuxt.js开发服务端渲染项目,并把最新代码发布到代码管理仓库,gitlab或者码云。

2、进入jenkins

3、新建jenkins服务,选择相关设置

选择node js进行安装,如果没有需要在jenkisn 插件面板安装nodejs

输入shell构建命令

以下是命令的具体说明,pm2需要下载安装;node_modules这个目录还是需要的,不要项目运行不了(有点坑,毕竟包变得很大了)。

  1. #!/bin/bash -ilex
  2. node -v
  3. #进入当前项目jenkins工作空间,此时会把仓库代码拉取到这里。
  4. cd $WORKSPACE
  5. #因为node-sass很难下载,所以加上淘宝源的方式
  6. npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
  7. # 因为root权限不能这样执行,所以加上--unsafe-perm=true --allow-root,如果可以下载就不加
  8. npm install --registry=https://registry.npm.taobao.org --unsafe-perm=true --allow-root
  9. #执行 nuxt package.json中的"build": "nuxt build",命令,开始构建生成.nuxt目录
  10. npm run build
  11. # 先清空原来项目所有文件,避免有缓存数据
  12. #.nuxt是隐藏文件,删除
  13. rm /app/nginx/finance-ssr/.nuxt -rf
  14. rm /app/nginx/finance-ssr/* -rf
  15. # 复制 .nuxt目录,static目录,node_modules目录(不要还不行),nuxt.config.js文件和package.json文件
  16. cp -r .nuxt /app/nginx/finance-ssr
  17. cp -r static /app/nginx/finance-ssr
  18. cp -r node_modules /app/nginx/finance-ssr
  19. cp nuxt.config.js package.json /app/nginx/finance-ssr
  20. # 复制好以上文件后,进入项目运行目录,我是放在 /app/nginx/finance-ssr目录下
  21. cd /app/nginx/finance-ssr
  22. # 需要先安装pm2,使用pm2delete命令删除原来已经在运行的服务。
  23. pm2 delete -s "finance-ssr"
  24. #使用pm2 命令执行 npm run start,并为当前服务命名
  25. pm2 start npm --name "finance-ssr" -- run start

4、nginx做一下配置

进入nginx配置目录,加上如下配置,监听8080端口(或其他端口,根据项目定),server_name  localhost,根据实际域名填写,我现在是本地测试,所以写了localhost.

proxy_pass   http://127.0.0.1:3000; 为nuxt启动的node服务,如果使用的是阿里云服务器,记得配置安全策略,3000和8080端口打开。

  1. server {
  2. listen 8080;
  3. server_name localhost;
  4. location / {
  5. proxy_redirect off;
  6. proxy_set_header Host $host;
  7. proxy_set_header X-Real-IP $remote_addr;
  8. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  9. proxy_set_header X-Forwarded-Proto $scheme;
  10. proxy_read_timeout 1m;
  11. proxy_connect_timeout 1m;
  12. proxy_pass http://127.0.0.1:3000; # 监听node 3000端口即正式环境
  13. }
  14. }

5、最后,服务器公网  ip+端口访问项目。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/661319
推荐阅读
相关标签
  

闽ICP备14008679号