WHCSRL 技术网

docker多stage构建+nginx加密vue项目解决方案

构建

目前已知的最优构建方案

# STAGE 1
FROM node:12-alpine AS build
WORKDIR /app
COPY package.json ./
RUN npm config set registry https://registry.npm.taobao.org/
RUN npm install
COPY . /app
RUN npm run build
# STAGE 2
FROM nginx:stable-alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

build.sh

docker build -t myapp .
docker run -p 25698:80 --name myapp myapp
  • 1
  • 2

nginx 配置需账号密码登陆

htpasswd

yum -y install httpd-tools 
# 需要 cd 到 /etc/nginx 目录去执行
htpasswd -c pass.db wang  //wang 并输入密码
# 会在/etx/nginx/passwd.db文件中生成用户名和加密的密码:myuser:YlmaHlkJnzhxG
htpasswd pass.db username
  • 1
  • 2
  • 3
  • 4
  • 5

Nginx 中

这里做了统一的反向代理到 我们创建的 25698 的nginx容器中

server {
    listen       92;
    server_name  localhost;

    auth_basic "User Authentication";
    auth_basic_user_file /etc/nginx/pass.db;

    location / {
    	   proxy_pass http://localhost:25698;
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
推荐阅读