阅读 1162

通过docker部署vue项目到阿里云、腾讯云

本机、服务器安装docker

本机安装@vue/cli

1、生成vue项目

vue create projectname
npm install 
npm run build
复制代码

2、添加dockerFile文件

FROM nginx  #基于nginx镜像打包COPY dist/ /usr/share/nginx/html/  #将打包后的文件copy到镜像里nginx的对应目录下COPY nginx/default.conf /etc/nginx/conf.d/default.conf #将本机的default.conf文件复制到容器的/etc/nginx/conf.d/default.conf,让 Nginx 能够读取该配置文件:EXPOSE 80
复制代码

3、添加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; }}
复制代码

4、打包镜像

docker image build ./ -t hello-docker:1.0.0  # 基于路径./(当前路径)打包一个镜像,镜像的名字是hello-docker,版本号是1.0.0。该命令会自动寻找Dockerfile来打包出一个镜像
复制代码

5、基于镜像构建容器

docker run --rm -d -p 8081:80 --name testvue ccr.ccs.tencentyun.com/[空间名]/vuenginxcontainertencent:latest
或者

docker container create -p 8081:80 hello-docker:1.0.0
docker container start xxx # xxx 为上一条命令运行得到的结果
# 们使用docker container create来创建基于hello-docker:1.0.0镜像的一个容器,使用-p来指定端口绑定——将容器中的80端口绑定在宿主机的2333端口。

复制代码

访问http://localhost:8081即可

6、docker push 将构建好的镜像推送到dockerhub(docker 官方镜像仓库)

构建好的docker 可以存放在阿里云、或者腾讯云 可以加快访问速度

7、在服务器上执行(安装docker)

docker pull 镜像名即可 完整云服务器shell脚本

echo -e "---------docker Login--------"
docker login --username=$1 ccr.ccs.tencentyun.com --password=$2
echo -e "---------docker Stop--------"
docker stop testvue
echo -e "---------docker Rm--------"
docker rm testvue
docker rmi ccr.ccs.tencentyun.com/[空间名]/vuenginxcontainertencent:latest
echo -e "---------docker Pull--------"
docker pull ccr.ccs.tencentyun.com/[空间名]/vuenginxcontainertencent:latest
echo -e "---------docker Create and Start--------"
docker run --rm -d -p 8081:80 --name testvue ccr.ccs.tencentyun.com/[空间名]/vuenginxcontainertencent:latest
echo -e "---------deploy Success--------"
复制代码

8、配合github Actions 工作流实现整套流程



# 工作流名称
name: web-CI

# 限定工作流执行的条件
# 触发条件 branches限定分支
# push推送到master动作

on:
push:
branches:
- master

# 一个工作流的根节点jobs,以下可以定义多个job
jobs:
# 定义一个名为 build 的job
build:
# CI 或 job执行的环境
runs-on: ubuntu-latest

strategy:
matrix:
node-version: [8.x, 10.x, 12.x]
# job中每一步的任务序列
steps:
# Job Start
- name: Job Start
run: echo Hello, GitHub workflows !
# 检出你在当前github工作空间的项目
- uses: actions/checkout@v2
# 执行一个一系列或多行的shell命令
# - name: Run a multi-line script
# run: |
# echo Add other actions to build,
# echo test, and deploy your project.

# 设置Node环境 actions/setup-node@v1 是GitHub Marketplace其中的一个,相当于一个方法
# 使用一个Actions 使用uses关键字, with表明参数
- name: Use Node.js 8
uses: actions/setup-node@v1
with:
node-version: 8
- name: npm install, build
run: |
npm install
npm run build
- name: Publish Docker
uses: elgohr/Publish-Docker-Github-Action@2.11
with:
# The name of the image you would like to push
# name: ${{secrets.DOCKER_PROGRAM}}
name: [空间名]/vuenginxcontainertencent
# The login username for the registry
username: ${{secrets.DOCKER_USERNAME_TENCENT}}
# The login password for the registry
password: ${{secrets.DOCKER_PASSWORD_TENCENT}}
# Use registry for pushing to a custom registry
registry: ${{secrets.DOCKER_REGISTRY_TENCENT}}
- name: ssh docker login # 使用appleboy/ssh-action@master登录服务器执行拉取镜像脚本,服务器ip、用户名、密码
uses: appleboy/ssh-action@master
with:
host: ${{ secrets.SSH_HOST_TENCENT }}
username: ${{ secrets.SSH_USERNAME_TENCENT }}
password: ${{ secrets.SSH_PASSWORD_TENCENT }}
script: cd ~/sh && sh deploy.sh ${{ secrets.DOCKER_USERNAME_TENCENT }} ${{ secrets.DOCKER_PASSWORD_TENCENT }}
复制代码
文章分类
前端
文章标签