Docker + Jenkins + Nginx实现前端自动化部署

前期准备工作

docker安装

https://docs.docker.com/

jenkins安装

1. docker拉取jenkins镜像并执行
   
2. 配置jenkins环境
   
   也可以在jenkins的container里使用命令查看密码
   

jenkins自动化配置

1. Publish Over SSH配置远程服务器

安装插件Publish Over SSH

新增ssh server

完成后可点击右下角 Test Confirguration 进行测试。

2. NodeJS配置

在插件管理里搜索NodeJS Plugin并安装

在全局工具管理里安装nodejs

3. 添加凭据

4. 创建项目

配置项目的相关信息

构建项目

5. GitHub webHooks配置

在git push代码之后，可以自动触发Jenkins自动拉取GitHub上的代码进行构建

复制jenkins的github插件的hook url做为github Webhooks的payload url

6. 构建环境

在 Jenkins 中将 Node.js 和 npm 的 bin 文件夹添加到 PATH 中

7. Build Steps

提交给提交服务器代码是没有node_moudle，需要执行脚本去安装依赖

8. shell 命令

编写shell命令，执行打包命令等操作

node -v 
npm -v 
npm install
echo "依赖安装成功"
npm run build
echo "打包成功"
rm -rf next.tar     # 每次构建删除已存在的next压缩包
tar -zcvf next.tar ./.next  #将next文件压缩成next.tar
echo $PATH

通过SSH连接到远程服务器执行命令或发送文件

9. 配置阿里云服务器nginx的信息

Nginx 的配置文件通常位于 /etc/nginx 目录下。你可以使用 cd 命令进入该目录：

cd /etc/nginx

使用文本编辑器（如 vi 或 nano）打开 Nginx 的配置文件进行编辑

sudo vi nginx.conf

检查 Nginx 配置文件的语法是否正确。

sudo nginx -t

重新加载 Nginx 配置，使修改生效。

sudo service nginx reload

设置云服务器的访问规则，允许访问你设置的端口号（8001）

最后输入访问地址http://47.98.235.50:8001/