使用Docker、Nginx和Jenkins实现前端自动化部署

本文介绍了如何使用Docker安装Nginx和Jenkins,通过编写docker-compose.yml文件配置服务,设置目录结构,实现前端项目的自动化部署。详细讲述了配置Nginx、Jenkins插件安装、Node.js环境以及SSH参数的过程,同时讲解了如何生成SSH密钥并将其配置在GitLab中,以完成整个部署流程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

sudo chmod +x /usr/local/bin/docker-compose

输入docker-compose -v显示如下页面:

用Docker、Nginx和Jenkins实现前端自动化部署

Docker安装Nginx和Jenkins服务

=======================

安装Nginx和Jenkins

===============

Docker镜像拉取Nginx和Jenkins环境命令如下:

docker pull nginx

docker pull jenkins/jenkins:lts

安装完成后执行docker images可以清晰的看到当前Docker下存在的镜像。

docker images

用Docker、Nginx和Jenkins实现前端自动化部署

Nginx和Jenkins目录编写

=================

为了便于管理,在Docker下我们将Nginx和Jenkins聚集到一个文件目录之中。目录结构如下:

+ compose

- docker-compose.yml  // docker-compose执行文件

+ nginx

+ conf.d

- nginx.conf        // Nginx配置

+ jenkins

- jenkins_home       // Jenkins挂载卷

+ webserver

-static              //存放前端打包后的dist文件

Web server目录属于后期生成暂不讨论,需要手动创建的是Compose,Nginx和Jenkins目录及其下属文件,其中最主要的是docker-compose.yml文件和nginx.conf文件的配置。以上文件夹建议放在根目录下面,可以放在home文件夹之下也可以单独创建一个新的文件夹。

docker-compose.yml文件配置

======================

version: ‘3’

services:                                      # 集合

docker_jenkins:

user: root                                 # 为了避免一些权限问题 在这我使用了root

restart: always                            # 重启方式

image: jenkins/jenkins:lts                 # 指定服务所使用的镜像 在这里我选择了 LTS (长期支持)

container_name: jenkins                    # 容器名称

ports:                                     # 对外暴露的端口定义

- 8080:8080

- 50000:50000

volumes:                                   # 卷挂载路径

- /home/jenkins/jenkins_home/:/var/jenkins_home  # 这是我们一开始创建的目录挂载到容器内的jenkins_home目录  - /var/run/docker.sock:/var/run/docker.sock

- /usr/bin/docker:/usr/bin/docker                # 这是为了我们可以在容器内使用docker命令

- /usr/local/bin/docker-compose:/usr/local/bin/docker-compose

docker_nginx:

restart: always

image: nginx

container_name: nginx

ports:

- 8090:80

- 80:80

- 433:433

volumes:

- /home/nginx/conf.d/:/etc/nginx/conf.d  - /home/webserver/static/jenkins/dist/dist:/usr/share/nginx/html

nginx.conf文件配置

==============

server{

listen  80;

root /usr/share/nginx/html;index index.html index.htm;

}

上述两个文件配置完成之后,需要进入/home/compose目录下面输入以下命令,进行环境的启动:

docker-compose up -d

输入docker ps -a 查看容器的情况:

用Docker、Nginx和Jenkins实现前端自动化部署

状态显示up,后面的端口号显示如上为正常状态。在浏览器输入你云服务器的公网IP加上8080的端口号就可以显示如下页面:

用Docker、Nginx和Jenkins实现前端自动化部署

注意点:

  • 在此步骤之前,切记一定要开放云服务器的80端口安全组(可以参考提供的一键开通功能),但是除此之外建议手动添加8080端口的安全组。

  • 80端口:是为HTTP(HyperText Transport Protocol)即超文本传输协议开放的端口。

  • 8080端口:是被用于WWW代理服务的,可以实现网页浏览。

上图所需要的密码在docker-compose.yml中的volumes中的/home/jenkins/jenkins_home/secrets/initAdminPassword中。可以通过以下命令获得:

cat /home/jenkins/jenkins_home/secrets/initialAdminPassword

安装Jenkins插件

===========

进入页面之后,选择推荐安装。

用Docker、Nginx和Jenkins实现前端自动化部署

安装完成之后,选择左侧Manage Jenkins选项。如下图所示:

用Docker、Nginx和Jenkins实现前端自动化部署

Jenkins中Manage Plugins搜索以下插件GitLab、Publish Over SSH、Nodejs并安装。

用Docker、Nginx和Jenkins实现前端自动化部署

安装完成后配置Nodejs环境和SSH参数 在首页选择global tool Configuration>NodeJS选择自动安装和对应的Nodejs版本号,选择成功后点击保存。

![用Docker、Nginx和Jenkins实现前端自动化部署](https://img-service.csdnimg.cn/img_convert/f826d05402d2b717f21cbcaa2 《一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义》无偿开源 威信搜索公众号【编程进阶路】 7425d94.png)

用Docker、Nginx和Jenkins实现前端自动化部署

配置SSH信息,Manage Jenkins>configure System填写服务器的相关信息:

用Docker、Nginx和Jenkins实现前端自动化部署

用Docker、Nginx和Jenkins实现前端自动化部署

关联Jenkins和GitLab

================

生成密钥

====

在根目录下执行一下命令:

ssh-keygen -t rsa

一般默认两次回车,如下图所示:

用Docker、Nginx和Jenkins实现前端自动化部署

使用cd ~/.ssh查看生成的文件。将生成的密钥id_rsa复制粘贴到Jenkins中的凭证。如图所示:

用Docker、Nginx和Jenkins实现前端自动化部署

用Docker、Nginx和Jenkins实现前端自动化部署

用Docker、Nginx和Jenkins实现前端自动化部署

登陆GitLab,在GitLab中配置id_rsa.pub公钥:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值