Docker结合Jenkins部署vue项目

旧城等待， 2023-07-07 00:44 124阅读 0赞

# Docker结合Jenkins部署vue项目 #

接上篇

Vue项目没什么好说的，在本地一般使用vue ui启动vue管理的前端，然后在里面进行启动

Vue官方说可以不通过ngin来部署，但是如果上生产环境，建议还是要走nginx

## 安装nginx ##

这里安装过程不再赘述，如果不清楚可以参考下面这篇文章

https://blog.csdn.net/qq\_42815754/article/details/82980326

## 配置Jenkins ##

具体填Jenkins配置可以参考我的上一篇文章，这里需要安装一个额外的插件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyNTI3Nw_size_16_color_FFFFFF_t_70]

## dockerfile ##

在前端项目的根目录下添加dockerfile文件，内容如下：

# 设置基础镜像
    FROM nginx
    # 定义作者
    MAINTAINER yourname
    # 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
    COPY dist/  /usr/share/nginx/html/

这一步的原理：  
创建镜像后，把构建之后的`dist`文件夹下的静态文件都复制到  
`/usr/share/nginx/html/`这个目录里，这个目录就是当前镜像下nginx配置的静态资源目录，就等于把nginx原本默认的index.html（就是那个welcome to nginx）给换成我们构建完的前端页面

## 执行的shell ##

#这个是为了到你的前端项目文件夹下，具体路径要看你自己的项目和服务器配置
    cd /var/lib/jenkins/workspace/chatmovie_web/chatmovieweb
    #这些npm命令前最好确保可以连接到，或者现在服务器上跑一遍
    npm install
    # 下载 vue-cli
    npm install -g @vue/cli
    # 构建项目，生成dist目录
    npm run build 
    # 清除缓存并构建镜像，这里--no-cache很重要，我之前不加这个参数有时候会造成重新构架的镜像和原来的相同，chatmovieweb是镜像名
    docker build -t chatmovieweb --no-cache . 
    # 启动容器，把服务器的8888端口映射到项目的80端口，项目的80端口也就是容器内运行的nginx入口，刚才已经说明过了
    docker run -p 8888:80 -d --name chatmovieweb chatmovieweb

## 在Jenkins中填入上述命令 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyNTI3Nw_size_16_color_FFFFFF_t_70 1]

## 成功 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyNTI3Nw_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyNTI3Nw_size_16_color_FFFFFF_t_70 3]

### 注意 ###

有时候npm国外镜像会出各种问题，建议更换为淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完查看版本

cnpm -v

可以配置即使是npm也同样使用淘宝镜像

npm config set registry https://registry.npm.taobao.org

检测是否成功

npm config get registry
    npm info express

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyNTI3Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200220121759924.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyNTI3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyNTI3Nw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200220122856868.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyNTI3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyNTI3Nw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200220122936791.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyNTI3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyNTI3Nw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200220123047507.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyNTI3Nw==,size_16,color_FFFFFF,t_70