手把手教你避免window系统搭建docker+jenkins+nginx自动化部署前端项目的坑

李佛摩尔
1,245 阅读4分钟

以下内容为自己搭建过程亲测：

1、window安装docker-desktop -> ubuntu(linux子虚拟机)开启系统虚拟机，如果是mac的话就不需要整虚拟机了。开启window虚拟化可以看到本机已经装好虚拟机和docker,本质上docker是安装在虚拟机上的。

图片1.png

image.png

2、docker pull ngnix 和jenkins的镜像，用docker命令启动jenkins docekr run -dt --name jenkins -p 8080:8080 -p 50000:50000 --privileged=true -v 或者创建docker-compose.yml文件启动 命令:docker-compose up -d docker-compose stop

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:
      - 80:80
      - 433:433
    volumes:
      - /home/nginx/conf.d/:/etc/nginx/conf.d
      - /home/webserver/static/jenkins/dist/:/usr/share/nginx/html

image.png

3、启动完毕后我们可以在docker-desktop上看到容器正在运行，本地访问8080端口会到jenkins界面，进容器(docker exec -it 容器id  bash)找到初始密钥，var/jenkins_home/secrets/initialAdminPassword.

image.png

4、输入initialAdminPassword中的密码后进入jenkins一直点击保存，最后进入使用界面。

image.png

5、为了实现构建和自动化部署我们需要使用以下插件，在系统管理-> 插件管理安装nodejs(安装构建的依赖)、git(从github或者gitee拉取代码)、Publish Over SSH(构建dist包后发布到服务器)，安装完毕后在全局配置下配置默认的node的版本。

image.png

image.png

image.png

6、我们开始配置ssh链接远程服务器，首先在服务器安装ssh功能apt-get -y install ssh openssh ，如果出现unable的现象，执行更新指令apt-get update再执行apt-get安装包,更新完毕后，sudo su获取虚拟机root权限，设置登录密码(很重要)，输入 service ssh status观察ssh是否启动，如果没有启动，输入 sudo service ssh start–> 回车 --> ssh 服务就会启动。在/etc/ssh输入sudo vim sshd_config把配置文件中的找到#PasswordAuthentication no的注释#去掉，并且将NO修改为YES->找到#PermitRootLogin prohibit-password修改为 PermitRootLogin yes保存。

image.png

image.png

image.png

image.png

image.png

7、然后在jenkins的配置界面(系统管理->Configure System)配置ssh,passphrase就是root的密码，ifconfig获取ip地址分别填写。点击test configure检测是否链接成功。

image.png

image.png

8、然后创建我们的构建任务，描述就是简要介绍这个构建的内容，记得勾选丢弃旧的构建又不很占内存资源，设置你想要的保存天数；选取git作为项目拉取管理，填写git仓库地址和要构建的分支，在Credentials通过账号和密码创建拉取凭据。

image.png

image.png

image.png

9、设置构建环境为node,填写执行的shell命令，配置构建后的执行把我们构建的dist文件传到服务器对应路径下。

image.png

image.png

image.png

10、构建完毕后在我们的jenkins容器内其实已经有了dist包在容器内/var/jenkins_home/workspace。

image.png

11、为了实现域名转发,我们在虚拟机上安装nginx。 root下执行: apt-get install nginx, nginx -v  #查看安装版本

image.png

12、安装配置nginx的代理，apt install nginx，在/etc/nginx/ 设置nginx.conf为user root。

image.png

13、在conf.d下创建我们要监听端口和域名的转发端口为7878

server {
    listen       7878;
    server_name  www.kuwoyixia.* kuwoyixia.* localhost;
    #access_log  /var/log/nginx/host.access.log  main;

    location /week {
        alias /usr/build/week;
        index index.html index.htm;
    }

    **location / {******
    **root   /home/kuwoyixia/vue2023;******
    **index  index.html index.htm;******
    **}******
    
    #error_page  404              /404.html;
    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
    root   /usr/share/nginx/html;

}

14、然后启动nginx ，访问端口见下图

image.png

image.png

15、点击执行构建,查看控制台是否构建传输成功。

image.png

image.png

16、然后访问我们nginx配置的转发端口，可以看到我们发布在服务器的项目是成功打开的了，这样基本上一个自动化构建流程全部走完。

image.png

17、命令补充:

service nginx start 启动
service nginx stop 停止
/usr/sbin/nginx：主程序
/etc/nginx：存放配置文件
/usr/share/nginx：存放静态文件
/var/log/nginx：存放日志

好了，上面就是目前整个自动化部署的全流程，接下自己的构想是面对sass环境 打造脚本控制多分支构建docker镜像包。

avatar
文章
阅读
粉丝