通过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/lvdongliangtest/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/lvdongliangtest/vuenginxcontainertencent:latest
echo -e "---------docker Pull--------"
docker pull ccr.ccs.tencentyun.com/lvdongliangtest/vuenginxcontainertencent:latest
echo -e "---------docker Create and Start--------"
docker run --rm -d -p 8081:80 --name testvue ccr.ccs.tencentyun.com/lvdongliangtest/vuenginxcontainertencent:latest
echo -e "---------deploy Success--------"

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

# 工作流名称name: web-CI# 限定工作流执行的条件# 触发条件 branches限定分支# push推送到master动作on:  push:    branches:      - master# 一个工作流的根节点jobs,以下可以定义多个jobjobs:  # 定义一个名为 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: lvdongliangtest/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 }}

```

# 工作流名称

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: lvdongliangtest/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 }}

```