【window 10系统VUE项目Docker部署实践】Docker镜像+Nginx+动态读取static配置文件

一直在前端路上的码农
134 阅读3分钟

最近在学习Docker环境怎么部署vue项目，然后将实践过程进行了如下记录，以供参考：

1、在windows系统上安装docker，安装完后界面如下图：

docs.docker.com/desktop/ins…

image.png

2、新建一个vue工程

vue create vue2-demo

3、在项目的根目录下新建Dockerfile文件

#从docker官网拉取标准的nginx镜像,我们需要基于标准的nginx镜像制作自己的镜像

FROM nginx:latest

#拷贝vue项目打包后的dist目录的文件到指定文件夹下，改文件夹为镜像中的文件夹
COPY dist/  /usr/share/nginx/html/ 

#拷贝nginx下的default.conf文件到镜像下，替换掉原有的default.conf
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

4、在项目的根目录下新建nginx文件夹，建default.conf文件

default.conf 配置

server {

    listen       8086;
    server_name  localhost;

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

    location / {
        add_header 'Access-Control-Allow-Headers' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 
        add_header 'Access-Control-Allow-Origin' '*';

        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    location /opm_server/ {
         proxy_set_header Host $host;
         proxy_set_header  X-Real-IP        $remote_addr;
         proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
         proxy_set_header X-NginX-Proxy true;
         proxy_pass http://xx.xx.xx.xx:xx;
    }
    #   location /api/ {
    #   rewrite  /api/(.*)  /$1  break;
    #   proxy_pass http://10.0.42.60:3924;
    # }
    #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;
    }
}

5、工程目录如图：

image.png

6、工程打包生成dist文件

npm run build

7、拉取nginx镜像

docker pull nginx

8、构建镜像

#-t 是镜像的名字及标签，通常 name:tag 或者 name 格式，.是基于当前目录的 Dockerfile 来构建镜像
docker build -t test-docker:1.2.0 .

9、基于创建的test-docker:1.2.0镜像启动一个 Docker 容器，执行如下命令：

docker run -p 3060:8086 -d   --name vueApp test-docker:1.2.0 

#（1）-p 3060:8086表示端口映射，将宿主的3060端口映射到容器的8086端口（此端口为nginx所配置端口）。
#（2）-d 表示后台运行容器，并返回容器ID。
#（3）--name vueApp表示容器名称。
#（4）test-docker:1.2.0表示基于的镜像名称。

image.png

image.png

10、在浏览器中访问：http://localhost:3060，访问成功表示部署完成。

11、将镜像保存成 tar 归档文件发布版本给到运维人员，命令如下：

docker save -o test-docker.tar test-docker:1.2.0

image.png

12、在实际项目中，前端会存在静态配置文件需要运维人员去更改，前端可以做如下静态文件的映射，而无须重新去打包镜像以及启停镜像。

（1）在项目的根路径下创建static文件夹，并创建config.json：

{
    "baseURL": "http://10.28.17.157:33000",  
    "version":"1.1.0"
  }

如果在vue文件中做如下引入：打包后，是无法通过修改config.json文件来更新字段内容。 import { version } from '../../static/config.json'

（2）在src路径下创建config文件夹，并创建index.js文件，内容如下：

注：process.env.NODE_ENV在生产环境下为production，在开发环境下为development。

let version = process.env.NODE_ENV === 'production'
  ? '' : 'V1.0.0'

let baseURL = process.env.NODE_ENV === 'production'
  ? '' : 'http://100.28.17.15:3000'

fetch('/static/config.json').then(async (response) => {
    if (response.status === 200) {
      let config = null
      if (response.headers.get('content-type') === 'application/json') {
        config = await response.json()
      } else {
        config = await response.text()
      }
      if (config.version) {
        version = config.version ? config.version : ''
        localStorage.setItem('version', version)
      }

      if (config.baseURL) {
        baseURL = config.baseURL ? config.baseURL : ''
        localStorage.setItem('baseURL', baseURL)
      }
    }
  })
  console.log('config--index:', version, baseURL, process.env.NODE_ENV)

  export {
    version,baseURL
  }

（3）在vue文件里引入config.json字段内容

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div style="font-weight:bold;"><span style="margin-right:10px;">版本：{{version}}</span><span>日期：{{newDate}}</span></div>
    <div>{{baseURL}}</div>
  </div>
</template>

<script>
import { newDate } from '../../static/config.json'  //直接从静态文件引入
import { version, baseURL } from '@/config'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
     version:'',
     newDate: '',
     baseURL: ''
    }
    
  },
  mounted() {
    this.version = version ? version : localStorage.getItem('version');
    this.newDate = newDate;
    this.baseURL = baseURL ? baseURL : localStorage.getItem('baseURL');
    console.log('config--:', this.version,this.newDate, this.baseURL,process.env.NODE_ENV)
  }
}
</script>

（4）在本机的D盘建立static文件，再建立config.json文件，内容如下（注意区别工程下config.json文件好测试效果：

{
    "baseURL": "http://127.0.0.1:3004",
    "version":"1.5.0",
    "newDate":"2119",
    "telephone":"33333333333、11111111111"
  }

image.png

（5）将工程打包成dist文件后，执行docker build -t test-docker:1.3.0 . 再执行docker run命令：

docker run -p 3071:8086 -v D:\static\:/usr/share/nginx/html/static/ -d --name vueApp  test-docker:1.3.0

#上述命令表示将本机的D:\static与容器中/usr/share/nginx/html/static路径进行映射绑定，之后即可修改D:\static下的配置文件。/usr/share/nginx/html/static路径下为前端配置文件所在路径（根据nginx配置文件或者Dockerfile配置文件可知前端发布在/usr/share/nginx/html路径下）。

（6）在浏览器输入http://127.0.0.1:3071/

image.png

如上图所示，版本跟链接都是本机D:\static\config.json里字段对应的内容，而日期因为是通过import { newDate } from '../../static/config.json'方式引入，所以无法修改。

以上内容就是本次Docker镜像+Nginx+动态读取static配置文件在window 10下的实战了。

avatar
文章
阅读
粉丝