DevOps系列---【Jenkinsfile+Dockerfile+nginx+vue】

本文主要是介绍DevOps系列---【Jenkinsfile+Dockerfile+nginx+vue】，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.前提：一台装好的jenkins

参考:https://www.cnblogs.com/hujunwei/p/13176994.html

2.编写Dockerfile，放在项目根目录下

FROM nginx
#修改名字、版本、作者
LABEL name="home-finance-web-dev" version="1.0.0" author="hjw"
COPY dist/ /usr/share/nginx/html/
COPY nginx/nginx-dev.conf /etc/nginx/nginx.conf
EXPOSE 80

3.编写Jenkinsfile，放在项目根目录下

//流水线脚本
pipeline {
    agent any
    environment {
        WS = "${WORKSPACE}"
        TOPIC = "测试"
        TITLE = "标题"
        CONTENT = "具体内容"
    }

    //定义流水线的加工流程
    stages {
        stage('环境检查') {
            steps{
                sh 'printenv'
                echo "正在检测基本信息"
                sh 'git --version'
                sh 'docker version'
            }
        }

        stage('编译') {
            //jenkins不配置任何环境的情况下可以兼容任何场景
            agent {
                docker { image 'node:14.17.6-alpine3.13' }
            }
            steps{
                sh 'node -v'
                sh 'npm -v'
                sh 'pwd && ls -alh'
                sh 'echo "默认的项目目录:${WS}"'
                //注意:cd ${WS} && npm不能分开写，也不能直接用${WORKSPACE}
                sh 'cd ${WS}/fast-ui && npm config set registry=https://registry.npm.taobao.org && npm install -g cnpm --registry=https://registry.npm.taobao.org && cnpm install && cnpm run build'
            }
        }

        stage('生成镜像') {
            steps{
                sh 'pwd && ls -alh'
                echo '生成镜像'
                sh 'docker version'
                sh "echo 默认的项目目录:${WS}"
                sh 'cd ${WS}/fast-ui && docker build -t home-finance-web .'
            }
        }

        stage('部署') {
            steps{
                echo '部署....'
                sh 'pwd && ls -alh'
                sh 'pwd && ls -alh'
                sh 'docker rm -f home-finance-web'
                sh 'docker run -d -p 8081:80 --restart=always --name home-finance-web home-finance-web'
            }
        }
    }
}

4.编写nginx-dev.conf,放在项目根目录下的nginx目录下

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    # include /etc/nginx/conf.d/*.conf;

    server {
        listen       80;
        server_name  101.43.159.8; # 服务器地址或绑定域名

        #charset koi8-r;
        #access_log  /var/log/nginx/host.access.log  main;

        # =========================================================
        # ================== ↓↓↓↓↓↓ start ↓↓↓↓↓↓ ==================
        # =========================================================

        location / {
            root   /usr/share/nginx/html;
            #try_files $uri $uri/ @router;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html; # 解决页面刷新 404 问题
            #proxy_pass http://zhengqingya.gitee.io; # 代理的ip地址和端口号
            #proxy_connect_timeout 600; #代理的连接超时时间（单位：毫秒）
            #proxy_read_timeout 600; #代理的读取资源超时时间（单位：毫秒）
        }

        # =========================================================
        # ================== ↑↑↑↑↑↑ end ↑↑↑↑↑↑ ==================
        # =========================================================

        #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;
        }

    }
}

这篇关于DevOps系列---【Jenkinsfile+Dockerfile+nginx+vue】的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！