一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

系列介绍

接下来将记录小白怎样搭建一个完整的前后端分离项目，会有一个系列文章。其中技术栈包括：

服务器：ubuntu
前端：vue3 nginx
后端：django uwsgi mysql
其他： github docker

文章中若出现问题欢迎大家批评。
第一节：服务器ubuntu搭建jenkins部署项目
 第三节:jenkins+docker-compose+django+uwsgi

1.本节简要介绍

第一节已经讲过在服务器中的下载安装与服务器拉取github代码的步骤了，本节主要讲述jenkins怎么自动化部署前端项目到服务器中，涉及到docker和nginx的简单应用。涉及jenkins的只是项目构建时和构建后的命令，基本的项目配置请看第一节。

2.相关技术

docker Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中。容器是完全使用沙箱机制，相互之间不会有任何接口。 docker能合并多个服务，操作系统内存公享，容器之前完全隔离，性能优良。
nginx 高性能的HTTP和反向代理web服务器。

3.项目配置

docker安装

# 更新apt-get 并且可以使用https
sudo apt-get update 
sudo apt-get install \
    ca-certificates \
    curl \
    gnupg \
    lsb-release
# 添加官方密钥
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
# 安装最新版本的Docker Engine和containerd
sudo apt-get install docker-ce docker-ce-cli containerd.io
# 启动docker
sudo service docker start
# 查看docker版本
docker -v

简单版

如果你只是想简单起一个代理服务器，后续不会有改变nginx配置的行为，只需要用nginx镜像启动容器就可以了

# 下载nginx最新镜像
docker pull nginx:latest
# -itd 后台运行且分配一个伪终端  -p 容器暴漏端口:容器内使用端口 -v 文件夹同步
docker run -itd -p 8000:80 -v /home/ubuntu/test/dist:/usr/share/nginx/html nginx:latest

复杂版

如果你想在项目开发时更新nginx配置和环境配置等，就需要将配置文件放在项目中

# nginx.conf 
# nginx配置文件。
server { 
    # 服务器端口
    listen       80;
    # 服务器名称
    server_name  localhost;
    # 路径配置
    location / {
        # 相对路径配置，基于nginx启动的位置
        root   /usr/share/nginx/html;
        index  index.html;
    }
}
# 添加了日志文件目录
access_log /var/log/nginx/access.log main;
error_log /var/log/nginx/error.log warn;

Dockfile文件是用来生成符合自己需求的镜像，

# 使用nginx镜像
FROM nginx
# 执行命令 删除nginx默认配置文件
RUN rm /etc/nginx/conf.d/default.conf

start.sh 文件中编写了服务器中所需要执行的shell命令

# 如果docker存在正在运行且name为fe的容器
if [ "$(docker ps -q -f name=fe)" ]; then
    docker stop fe    
    docker rm fe
    docker rmi testfe
fi
# 如果docker存在没有运行且name为fe的容器
if [ "$(docker ps -aq -f status=exited -f name=fe)" ]; then
    docker rm fe
    docker rmi testfe
fi
# 删除fe容器 删除testfe镜像

# 根据当前目录的Dockerfile文件 生成名字为testfe的镜像
docker build -t testfe .
# 通过testfe镜像生成符合要求的fe容器并运行 3000端口
# --restart=always 容器开机自启
docker run -itd --restart=always \
-v /home/ubuntu/felogs:/var/log/nginx \
-v /home/ubuntu/test/nginx:/etc/nginx/conf.d \
-v /home/ubuntu/test/dist:/usr/share/nginx/html \
--name fe  -p 3000:80 testfe

jenkins配置

简单版

node -v
npm i
npm run build
tar -zcvf dist.tar.gz ./dist

cd /home/ubuntu/test
sudo tar -zxvf  dist.tar.gz
sudo rm -f dist.tar.gz

复杂版

node -v
npm i
npm run build
tar -zcvf dist.tar.gz ./dist ./Dockerfile ./nginx ./start.sh

cd /home/ubuntu/test
sudo tar -zxvf  dist.tar.gz
sudo rm -f dist.tar.gz
sh start.sh

成功

此时就可以访问服务器ip:3000来查看你部署的项目内容了

4.课外知识

1.shell常用指令
2.docker hub
3.常用指令看本文章

第二节：jenkins+docker+nginx+vue