ICode9

精准搜索请尝试: 精确搜索
首页 > 系统相关> 文章详细

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

2022-03-03 02:00:24  阅读:175  来源: 互联网

标签:vue log DevOps --- nginx sh WS && html


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

    }
}

 

标签:vue,log,DevOps,---,nginx,sh,WS,&&,html
来源: https://www.cnblogs.com/hujunwei/p/15957956.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有