gitlab CI/CD 自动化部署vue前端项目 - 自动化部署配置文件

# 一、 .gitlab-ci.yml

>stages:          # List of stages for jobs, and their order of execution
>>  - build  
>>  - deploy

>build-job:   # This job also runs in the test stage.
  >>stage: build    # It can run at the same time as unit-test-job (in parallel).
  >>script:
    >>>- echo "Linting code... This will take about 10 seconds."
    >>>- npm set registry https://registry.npm.taobao.org # 设置淘宝镜像地址
    >>>- npm install 
    >>>- npm run build    

    >>>- echo "删除已有容器"
    >>>- docker stop vue
    >>>- docker rm vue
    >>>- docker rmi vuenginxcontainer:latest  
    >>>- docker build -t vuenginxcontainer .

>deploy-job:      # This job runs in the deploy stage.
  >>stage: deploy  # It only runs when *both* jobs in the test stage complete successfully.
  >>script:
    >>>- echo "启动容器"   
    >>>- docker run -d -p 8081:80  --restart=always --name vue vuenginxcontainer:latest


# 二、Dockerfile
  
>FROM nginx:latest
>COPY dist/ /usr/share/nginx/html/

# 三、nginx/default.conf
  
>worker_processes  1;
# 以上是全局模块
# worker_processes的值越大,Nginx并发能力越强
>>events {
   >>> worker_connections  1024;
>>}
# worker_connections的值越大,Nginx并发能力越强

>http {
    >>include       mime.types;
    >>default_type  application/octet-stream;
    >>sendfile        on;
    >>keepalive_timeout  65;

    >>server {
        >>>listen       80;
        >>>server_name  localhost;

        >>>location / {
            root   /usr/local/nginx/html/dist;
            index  index.html index.htm;
        >>>}
        # location
        # root: 将接收到的资源根据/usr/local/nginx/html/dist文件夹去查找资源
        # index: 默认去上述路径中找到index.html或者index.htm
        >>>error_page   500 502 503 504  /50x.html;
        >>>location = /50x.html {
        >>>>    root   html;
        >>>}

    >>}
>}