window本地跑docker镜像--基于vue

1、window安装docker（切记拉到最下面的win10（专业版），上面是win7、win8） https://www.runoob.com/docker/windows-docker-install.html

2、yarn build（如果需要实现一次构建多环境使用的情况的话，可以通过在package.json中使用不同的script来实现，比如：cross-env BUILD_TYPE=image yarn build， 多了一个BUILD_TYPE=image，通过占位符来实现，记得要配上.env.placeholder）

3、docker build -t service-config -f Dockerfile .    通过根路径下面的Dockerfile进行构建镜像

4、docker run -d --name service-config -p 8081:80 service-config API_SERVER=http://127.0.0.1:7001 PUBLIC_PATH=.   本地8081端口映射80端口   service-config是镜像的名字，latest是当前镜像的标签

docker基本操作 链接  ： https://juejin.im/post/6844904101621268487#heading-1（更详细可以看官网）

dockerfile文件相关命令  链接： https://zhuanlan.zhihu.com/p/111117665 （更详细的可以看官网）

启动容器时报错   链接：https://blog.csdn.net/top_explore/article/details/107913623

Dockfile.local

FROM nginx

COPY ./dist /usr/share/nginx/html

# COPY ./nginx.conf /etc/nginx/nginx.conf

COPY ./entrypoint.sh /usr/share/nginx/html

COPY ./nginx.default.conf /etc/nginx/conf.d/default.conf

WORKDIR /usr/share/nginx/html

RUN chmod +x ./entrypoint.sh

ENTRYPOINT ["./entrypoint.sh"]

 

./entrypoint.sh

#!/bin/bash

# . $PWD/replace.sh $@

envs=$@

#UNAME=$(uname)

function getKey() {

  echo $1 | cut -d '=' -f '1'

}

function getValue() {

  echo $1 | cut -d '=' -f '2-'

}

function doReplacePlaceholder() {

  for i in ${envs[@]};

    do

      envKey=`getKey $i`

      envValue=`getValue $i`

      sed -i  "s#__PLACEHOLDER_$envKey#$envValue#g" $1

    done

}

function traverseFile() {

  echo $@

  for file in `ls $1`;

  do

    # 目录

    if [ -d "$1/$file" ]; then

      traverseFile "$1/$file" ${envs[@]}

    else

      ## https://www.cnblogs.com/xzlive/p/9485980.html

      ## 对.css|.js|.html文件执行替换操作

      # todo 优化定义一个数组

      if [ "${file##*.}"x = "css"x ] || [ "${file##*.}"x = "js"x ] || [ "${file##*.}"x = "html"x ];then

        # echo "$file"

        # 执行替换操作

        doReplacePlaceholder "$1/$file" ${envs[@]}

      fi

    fi

  done

}

traverseFile . ${envs[@]}

echo "启动nginx服务"

nginx -g "daemon off;"

 

 .env.placeholder

API_SERVER=__PLACEHOLDER_API_SERVER
PUBLIC_PATH=__PLACEHOLDER_PUBLIC_PATH
UPLOAD_ACTION=__PLACEHOLDER_UPLOAD_ACTION
OSS_BUCKET=__PLACEHOLDER_OSS_BUCKET
OSS_REGION=__PLACEHOLDER_OSS_REGION
OSS_DIR=__PLACEHOLDER_OSS_DIR
CI_SERVICE=__PLACEHOLDER_CI_SERVICE

# 本地新建一个 .env 文件，复制自己需要的对应的环境变量
# 本文件下面的环境变量仅供本地复制使用，不要取消注释，仅保留上面的占位符变量，用来发布镜像时替换
# 如环境变量有改动，请在上面添加占位符变量，并且在下面补充

# dev

# qa

# uat

 nginx.default.conf(不需要，参考作用，上面已经注释掉了)

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;

        add_header Cache-Control 'no-cache';

    }

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

    }

}