Dockerfile Nginx Jenkinsfile Vue项目自动化部署相关文件

1 篇文章 0 订阅
1 篇文章 0 订阅

说明:
由于项目需要通过环境变量动态更改nginx的配置所以引入default.conf.template,default.conf.template是带有环境变量的nginx配置文件,docker启动后会读取环境变量替换掉default.conf.template中使用的环境变量,生default.conf后再启动docker

default.conf.template
server {
    listen       80;
    server_name  localhost;

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

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

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
    location /api {
        root            /usr/share/nginx/html;
        proxy_pass      ${PROXY_URL};
        rewrite         ^/api/(.*)$ /$1 break;
    }
}
Dockerfile
FROM node:10.19.0 as build
WORKDIR /merry-web
COPY package.json ./
RUN npm install
COPY . .
RUN npm install node-sass
RUN npm run build


FROM nginx
COPY --from=build /merry-web/dist /usr/share/nginx/html/
COPY nginx/templates /etc/nginx/templates
// 可以加载环境变量配置不同的代理url
ENV PROXY_URL='http:localhost:8080'

EXPOSE 80

Jenkinsfile
pipeline{
    agent  any
    stages {
        stage('Build') {
            steps{
                withCredentials([usernamePassword(credentialsId: 'QACICD', passwordVariable: 'QACICDPassword', usernameVariable: 'QACICDUser')]) {
                		# 					app:0.1.0.123.1qweasde
                        sh 'docker build -t ${project_name}:${ver_release} .'
                }
            }
        }
        stage('push') {
            parallel{
               stage("push harbor"){
                    steps{
                        withCredentials([usernamePassword(credentialsId: 'QACICD', passwordVariable: 'QACICDPassword', usernameVariable: 'QACICDUser')]) {
                            sh "docker login -u ${QACICDUser} -p ${QACICDPassword} ${imgharb}"
                            sh "docker tag ${local_image_name} ${harb_img_name}"
                            sh "docker tag ${local_image_name} ${harb_img_name_latest}"
                            sh "docker push ${harb_img_name} && docker push ${harb_img_name_latest}"
                        }
                    }
                }
                stage("push register"){
                    steps{
                        withCredentials([usernamePassword(credentialsId: 'QACICD', passwordVariable: 'QACICDPassword', usernameVariable: 'QACICDUser')]) {
                            sh "docker login -u ${QACICDUser} -p ${QACICDPassword} ${imghub}"
                            sh "docker tag ${local_image_name} ${image_name}"
                            sh "docker tag ${local_image_name} ${image_name_latest}"
                            sh "docker push ${image_name} && docker push ${image_name_latest}"
                        }
                    }
                }

            }

            }

    }
    environment {

        version = sh(returnStdout: true, script: """cat package.json |grep version|awk -F '"' '{print \$4}'""").trim()
        com_tag = sh(returnStdout: true, script: 'git rev-parse --short HEAD').trim()
        com_count = sh(returnStdout: true, script: 'git rev-list --count HEAD').trim()
        ver_release = "${version}.${com_count}.${com_tag}"

        project_name = "app"
		# 线上镜像库url(根据需求自己填)
        imghub = "url"
        imgharb ="url"
        GIT_NAME= sh(returnStdout: true, script: "git --no-pager show -s --format='%an' $GIT_COMMIT").trim()
        GIT_COMMITER_EMAIL= sh(returnStdout: true, script: "git --no-pager show -s --format='%ae' $GIT_COMMIT").trim()

        local_image_name = "${project_name}:${ver_release}"

        image_name = "${imghub}/${project_name}:${ver_release}"
        image_name_latest = "${imghub}/${project_name}:latest"
        image_name_version = "${imghub}/${project_name}:${version}"

        harb_img_name = "${imgharb}/${project_name}:${ver_release}"
        harb_img_name_latest = "${imgharb}/${project_name}:latest"
        harb_img_name_version = "${imgharb}/${project_name}:${version}"
    }

}
docker运行

sudo docker run container -d -p 80:80 -e PROXY_URL=url image_name

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当使用Docker部署Nginx来访问Vue项目时,可以按照以下步骤进行操作: 1. 首先,确保已经安装了DockerDocker Compose。这两个工具可以帮助我们管理和运行容器。 2. 创建一个新的文件夹,用于存放相关的配置文件和代码。 3. 在该文件夹下创建一个名为`Dockerfile`的文件,并添加以下内容: ``` # 使用官方的Nginx镜像作为基础镜像 FROM nginx # 删除默认的Nginx配置文件 RUN rm /etc/nginx/conf.d/default.conf # 将自定义的Nginx配置文件复制到容器中 COPY nginx.conf /etc/nginx/conf.d # 将Vue项目的静态文件复制到Nginx的默认网站目录 COPY dist /usr/share/nginx/html # 暴露80端口,允许外部访问 EXPOSE 80 ``` 4. 在同一文件夹下创建一个名为`nginx.conf`的文件,并添加以下内容: ``` server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } } ``` 这个配置文件Nginx监听80端口,并将所有请求转发到Vue项目的静态文件。 5. 将Vue项目的打包文件(通常在`dist`目录下)复制到同一文件夹下。 6. 打开终端,进入到该文件夹,并执行以下命令来构建和运行Docker容器: ``` docker build -t my-nginx . docker run -d -p 80:80 my-nginx ``` 第一条命令将根据`Dockerfile`构建一个名为`my-nginx`的镜像。第二条命令将在后台运行该镜像,并将容器的80端口映射到主机的80端口。 现在,您可以通过访问`http://localhost`来查看部署Vue项目

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值