Docker is installed on the host and server

Local install @vue/ CLI

1. Generate vUE project

vue create projectname
npm install 
npm run build
Copy the code

2. Add the dockerFile file

Dist / /usr/share/nginx/ HTML / # COPY nginx/default.conf to nginx / etc/nginx/conf. D/default. The conf # will be the default of the unit. The file is copied to the container's/etc/nginx/conf. D/default. Conf, let nginx is able to read the configuration file: EXPOSE was 80Copy the code

3. Add the nginx configuration file 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; }}
Copy the code

4. Pack the image

Docker image build./ -t hello-docker:1.0.0 # path-based./ (current path) package an image with the name of hello-docker and version 1.0.0. This command will automatically find the Dockerfile to package up an imageCopy the code

5. Build containers based on images

Docker run - rm - d - 8081 p: 80 - name testvue ccr.ccs.tencentyun.com/ space [name] / vuenginxcontainertencent: latest or docker Container create -p 8081:80 hello-docker:1.0.0 docker container start XXX # XXX Create to create a container based on the Hello-docker :1.0.0 image, using -p to specify port binding -- bind port 80 in the container to port 2333 on the host machine.Copy the code

Visit http://localhost:8081

6, Docker push the image to dockerHub (docker official image repository)

The docker built can be stored in Ali Cloud, or Tencent cloud can speed up access

7, execute on server (install docker)

Docker pull image name can complete cloud server shell script

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/ space [name] / vuenginxcontainertencent: latest echo - e "-- -- -- -- -- -- -- -- - the docker Pull -- -- -- -- -- -- -- --" docker Pull Ccr.ccs.tencentyun.com/ space [name] / vuenginxcontainertencent: latest echo - e "-- -- -- -- -- -- -- -- - the docker Create and Start -- -- -- -- -- -- -- --" docker The run - rm 8081 - d - p - 80 - name testvue ccr.ccs.tencentyun.com/ space [name] / vuenginxcontainertencent: latest echo - e "---------deploy Success--------"Copy the code

8. Cooperate with github Actions workflow to realize the whole process

# workflow name: web-ci # Qualified workflow execution conditions # Trigger conditions branches Qualified branches # Push to Master action on: push: branches: # define a job named build. Build: # CI or the environment in which the job is executed runs-on: Ubuntu -latest Strategy: Matrix: node-version: [8.x, 10.x, 12.x] steps: # job Start name: job Start run: echo Hello, GitHub workflows ! # Check out your project in the current Github workspace -uses: actions/checkout@v2 # Execute a series or lines of shell command # -name: Run a multi-line script # Run: | # echo Add other actions to build, # echo test, And deploy your project. # Set up the Node environment actions/setup-node@v1 is one of the GitHub Marketplace's equivalent methods # use an actions using the uses keyword, Js 8 uses: actions/setup-node@v1 with: node-version: 8-name: NPM install, build run: | NPM install NPM run build - name: the Publish Docker USES: elgohr/[email protected] with: # The name of the image you would like to push # name: ${{secrets.DOCKER_PROGRAM}} name: [name] space/vuenginxcontainertencent # The login username for 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 # use appleboy/ssh-action@master to login to the server. The server IP address, username, and password are 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 }}Copy the code