前言：

本文描述了如何采用teamcity将项目部署在docker容器中，完成前端项目（例子为vue，其他项目理论上也适用，各框架下完成项目打包即可）自动部署的具体方式，思路及步骤如下：
1.teamcity从git拉取代码到工作空间
2.在工作空间目录下，项目打包生成dist，
3.将dist复制到以nginx为基础镜像的dockerimage中，完成dockerimage的build
4.最后用docker命令行运行项目
这样一个自动部署就完成了，代码提交后就会就会自动部署项目到docker上，节省非常多的人力物力有木有

以下是详细实现步骤，各位看官慢用之

一、自定义nginx配置和Dockerfile

项目需要基于web容器来启动，此处选择常用的nginx

1.项目根目录创建nginx/default.conf配置，内容:

server {
listen       80;
server_name  localhost;

#charset koi8-r;
access_log  /var/log/nginx/host.access.log  main;
error_log  /var/log/nginx/error.log  error;

location / {
    root   /usr/share/nginx/html;
    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;
}
}

2.项目根目录创建Dockerfile文件

FROM nginx

#设置时区
RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime
RUN echo 'Asia/Shanghai' >/etc/timezone

#dist目录下内容 copy 到nginx原来的默认文件夹下
COPY dist/ /usr/share/nginx/html/

#copy 替换nginx默认配置文件
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

二、配置Teamcity

git仓库配置及其他基本操作比较简单，可以查看官方文档，不在赘述。

打开buildStep配置，其中从上到下三个步骤，配置如下，注意顺序按runType排列为:
Node.js => Docker => Command Line

前端项目部署docker 前端项目部署到docker_vue.js


每个step可以点击add build step创建，也可以点auto-detect build steps自动读取，可以点击Reorder build steps对buildStep进行拖动排序

Step1配置：

在基于node.js环境的docker容器内打包项目源码

前端项目部署docker 前端项目部署到docker_docker_02

内容：

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

npm install
npm i @vue/cli-service
npm run build:prod

说明：
当前步骤，将使用以node为基础镜像的docker容器中打包work/xxx目录下的项目，git clone的项目源码放在teamcity的/buildAgent/work/xxxx目录下，映射与xxx的关系可以查看work目录下的directory.map

上图配置中的docker基础镜像可以指定其他版本，teamcity默认为node:lts，也就是node的长期支持版本）
命令行内容可以根据自己需求更改，目的是完成项目的打包
至于为啥在docker中打包，猜测应该是因为docker环境相对隔离，不会因为宿主机上没有可用的打包软件及环境或其他环境问题影响到打包流程，且只在第一次打包时构建image，下次打包直接从本地registry中拉取，高效便捷无污染，docker yes~

命令行参数解释：
命令1和2配置了npm的registry，可以加速node_model的安装
也可以在Build Features里配置（推荐），将会配置对应项目的registry。（实测命令行方式没这里配置的方便好使）

PS: 如果这个step一直卡住不动，可以在buildStep的docker运行参数设置中添加dns解决，具体做法是在上图的Additional docker run arguments添加：–dns 8.8.8.8 --dns 8.8.4.4 参考这里

前端项目部署docker 前端项目部署到docker_前端_03

打包命令如下：
npm install
npm i @vue/cli-service
npm run build:prod
其中最后一行替换为自己项目中需要的npm build xxx命令
npm i @vue/cli-service，这个加上最好，不然可能出现vue/cli-service not found的问题

Step2配置：

build出项目的docker image

前端项目部署docker 前端项目部署到docker_docker_04

说明：

图中image name:tag栏，输入自定义的"image名称:版本"，不指定版本也可以，默认版本为latest
默认勾选了build，一般不用改动，如果是有搭建docker私服的话，就使用push并配置docker私服地址，将镜像上传到docker私服中

其他选项无特殊需求无需改动

Step3配置：

从docker image运行container

前端项目部署docker 前端项目部署到docker_前端_05

内容：

docker stop my-web-app
docker rm my-web-app
docker run --name my-web-app  -p 7000:80 -d vuenginxcontainer

说明：
其中" my-web-app"改为你项目自定义的容器名称，可以跟项目名称相同，但不能有大写字母，端口号7000为最终暴露到外部可访问的端口，自定义即可，80为容器内部的nginx默认端口，详情参考docker run命令详解
这一步就是从上一个step中build出的image："vuenginxcontainer"来启动容器，容器先停止，删除，再运行

删除容器时若是第一次部署，docker stop和rm会提示容器不存在，但报错并不影响其他命令执行，因为命令是单条执行的，此处忽略报错即可

其他选项无特殊需求无需改动



三、查看日志和容器运行情况：

完成了所有配置，试着点右上角的run来执行全部buildstep

接着点击顶栏选项卡的Agent

再点击BuildLog来查看执行日志

前端项目部署docker 前端项目部署到docker_ci/cd_06


其中某个步骤如果出错了这里可以查看详细问题，根据提示做出调整解决问题即可

查看docker容器运行情况：docker ps -a
有可视化界面的话可以用可视化界面查看，比如Portainer.io

结语：

本文描述了Teamcity+docker+vue的自动部署配置方案，当然也可以不使用Teamcity，用Jenkins，gitlabCI，或自己写脚本部署（需要自动部署的话，要写定时器定时拉取git代码）也完全可以 ，原理都是相似的
不用docker用宿主机环境也可以，但docker是确确实实的省事不少，可以自由结合现有状况做出对应调整

其他如java项目的微服务自动部署配置方案，结合docker-compose等，可以点这里（待续）