构建发布docker

[HeroBarry]

构建发布采用docker镜像如何实现 @PanJiaChen
生产环境采用docker部署

[PanJiaChen]

讲起来比较复杂，建议自行搜索docker+前端

[daiing]

问下裤衩大神，你们docker部署的时候，到现场npm install的，还是已经build好，直接发布的？我在服务器上install，经常不成功

[HeroBarry]

我是想弄成build好的镜像

[daiing]

@HeroBarry 那很简单，写个dockerfile即可
FROM nginx:1.12
COPY dist/ /usr/share/nginx/html/

[HeroBarry]

@daiing 你就是这么干的 ？我还在试

[daiing]

这是最基本的，你要其他要求，另外加配置

[HeroBarry]

嗯嗯

[HeroBarry]

我这边的一种镜像打包方式（dockerfile）
FROM nginx
VOLUME /tmp
ENV LANG en_US.UTF-8
RUN rm -v /etc/nginx/nginx.conf # 移除nginx本来的配置
ADD nginx/nginx.conf /etc/nginx/ # 加入自定义配置
ADD dist /usr/share/nginx/html/ # node编译的前端文件
EXPOSE 80
EXPOSE 443

[linux-chaina]

@HeroBarry 还是不知道怎么用Docker部署的啊

我的Dockerfile
取自：https://nodejs.org/zh-cn/docs/guides/nodejs-docker-webapp/

FROM node:8
WORKDIR /src
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 8081
CMD npm run dev

docker run之后，宿主机访问不了。
➜ ~ docker run -i -t -p 8082:8081 -d --name=vue-admin-template vue-admin-template
5c29f043d14a9b6813b24e6246cc3dc25f9b643bafed37a96933012b0658e478
➜ ~ curl localhost:8082
curl: (52) Empty reply from server

docker 日志是正常的：
➜ ~ docker logs 5c29f043d14a9b6813b24e6246cc3dc25f9b643bafed37a96933012b0658e478

vue-admin-template@3.8.0 dev /src
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
98% after emitting
DONE Compiled successfully in 9228ms 08:43:48
I Your application is running here: http://localhost:8081

如果就是本地起，应该拿到这样的结果：
➜ ~ curl localhost:8081

<title>vue-admin-template</title>

<script src="/app.js"></script>

问下到底怎么才能配置docker起来并能在外部访问？

[HeroBarry]

你这个方式没有试过 还是建议先build镜像 再运行镜像 新建dockerfile文件 docker命令build一下
#592 (comment)

[linux-chaina]

已经OK了，如下 Dockerfile 即可：

# 需要node打包
FROM node:8

# 需要nginx代理
RUN apt-get update  && apt-get install -y nginx

WORKDIR /app

COPY package*.json ./
COPY . /app

# 打包文件
RUN npm install --registry=https://registry.npm.taobao.org && npm run build
#RUN npm run build

# 复制node打包目录
# 复制nginx配置文件
RUN cp -r dist/* /var/www/html/ && cp APP-META/nginx/nginx.conf /etc/nginx/conf.d/

EXPOSE 8081

# 启动nginx
CMD ["nginx","-g","daemon off;"]

[linux-chaina]

nginx 配置：

server{
    # 监听端口
    listen 8081;
    listen [::]:8081;

    # 域名
    server_name localhost;

    # 一些配置
    charset utf-8;
    access_log off;

    # node打包的文件配置
    root /var/www/html;
    # index page
    index index.html;

    # 页面资源
    location / {
        index index.html index.htm;
    }

    # Rest-Api
    location /api/ {
        # 后端API
        proxy_pass http://your_api_address;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header X_REMOTE_IP $remote_addr;
    }

}

[HeroBarry]

赞 是不是 好简单

[Veitor]

用node镜像npm install时，还需要安装python，也就是说需要node+python的镜像啊。。有点蛋疼

[zx1986]

建議可以參考這篇文章，強烈推薦：
https://medium.com/js-dojo/vue-js-runtime-environment-variables-807fa8f68665

• Dockerfile

# build stage
FROM node:lts-alpine as build-stage
RUN apk update && apk add git curl
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build:prod

# production stage
FROM nginx:stable-alpine as production-stage
RUN mkdir /app
COPY --from=build-stage /app/dist /app
COPY entrypoint.sh /usr/share/nginx/
ENTRYPOINT ["/usr/share/nginx/entrypoint.sh"]
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

• nginx.conf

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;
  keepalive_timeout  65;

  server {
    listen       80;
    server_name  _;
    charset      utf-8;
    location / {
      root   /app;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }

}

• entrypoint.sh

#!/bin/sh
JSON_STRING='window.configs = { \
  "VUE_APP_SENTRY_DSN":"'"${VUE_APP_SENTRY_DSN}"'", \
  "VUE_APP_BASE_URL":"'"${VUE_APP_BASE_URL}"'" \
}'
sed -i "s~// CONFIGURATIONS_PLACEHOLDER~${JSON_STRING}~" /app/index.html
exec "$@"