Nuxt 自动部署
Nuxt 作为一个可进可退的 Vue 上层框架，既可以做静态部署（可以开启预渲染），也可以做服务端渲染。
本博客同样也是采用 Nuxt 进行开发并部署的，本文主要介绍一下用 Nuxt 框架时的两个自动部署方案，一个是国外的 vercel 平台，另一个是阿里云云效流水线平台。
两者都需要你有一个已经备案过的域名，后者还需要你有一台私人服务器。
一、Vercel
1. 注册账号
前往 vercel 官网 注册一个账号
2. 创建并配置项目
点击新建一个项目
点击导入自己的项目
创建组，并加入组
配置文件（如果 target 是 static，那么默认配置都不用动）
点击 deploy，成了，就这么简单方便。
vercel 也是可以部署服务端渲染的，方法是把前端页面编译成云函数，具体内容网上也有介绍，感兴趣的可以自行研究。
3. 关联自己的域名
如果没有自己的域名，vercel 会发放给你一个免费的域名;如果有自己的域名，那么可以直接关联到自己的域名上。
只要配置一下域名解析，vercel 还会免费帮你把 https 配置好。
4. 查看历史版本
在 deployments 中可以看到所有的历史构建版本，还可以方便的回滚。
二、云效
1. 编写 Dockerfile
因为打算采用容器部署的方式部署到自己的服务器上，所以先写一个 Dockerfile 以备后用（根据自己的实际情况作修改）。
FROM node:12-alpine
# create destination directory
RUN mkdir -p /usr/src/nuxt-app
WORKDIR /usr/src/nuxt-app
# copy the app, note .dockerignore
COPY . /usr/src/nuxt-app/
RUN npm install
# build necessary, even if no static files are needed,
# since it builds the server as well
RUN npm run build
RUN npm run generate
# expose 80 on container
EXPOSE 80
# set app serving to permissive / assigned
ENV NUXT_HOST=0.0.0.0
# set app port
ENV NUXT_PORT=80
# start the app
CMD [ "npm", "start" ]
2. 注册阿里云账号并进入云效
首先注册阿里云账号并进入云效平台，点击流水线。
3. 配置流水线
选择一个基础模板进行创建流水线，可以先选一个和部署方式最接近的（之后可以调整），我这里选择这个作为基础模板。
配置 github 或者其它代码仓库（github 用下来体验并不是很好，可以试试阿里云的）
配置 Nodejs 构建并把容器上传到阿里云进行托管，然后配置 Dockerfile 的路径。
此处构建集群建议选择香港的，北京的构建集群在拉取 github 代码时会遇到一些问题。
选择 docker 部署，配置部署脚本，输出容器镜像名为环境变量。
docker login --username=username registry.cn-shanghai.aliyuncs.com --password=$password
docker pull $image
docker stop $(docker ps -a | grep "blog" | awk '{print $1}')
docker run -p8000:80 -d $image
这一环节很容易出错，环境变量不允许有大写字母或者中文字符，如果你的环境变量存在以上字符需要做一些处理，可以先 base64 化再做小写处理。
另外，这里使用 8000 作为对外端口是因为我的服务器上还有 nginx 做了一层代理（缓存策略以及80转发到443）；如果没有这个需求可以直接以 80 或 443 做外部端口。
4. 配置构建触发方式
云效支持 webhook 触发以及 定时触发 两种方式。我使用了 webhook 进行触发，配置方法也很简单，把 webhook 添加到你要触发的地方就可以了。
总结
至此，两种自动化部署的方式介绍完了，都非常方便，只要提交代码就会触发自动构建。配置完了之后只要把关注点放在代码上就好了。
