Docker前(vue)後(node)端解決方案

302 阅读2分钟

一、Docker安裝

  1. 装Docker
curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun
  1. 装Docker-compose
sudo curl -L "https://github.com/docker/compose/releases/download/1.24.1/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

二、建立项目目录

liunx下创建自己的项目目录(以我自己的项目为例)

image.png

  • nginx:nginx配置目录
  • static:静态资源存放目录
  • utils-dist:vue打包目录(内容直接从git拉取)
  • utils-koa:node代码存放目录(内容直接从git拉取)
  • docker-compose.yml:docker-compose配置文件

三、docker-compose配置

version: '3.1'
services:
  app-utils:
      container_name: app-utils
      #构建容器
      # build: ./utils-koa/Dockerfile
      build:
        context: ./utils-koa
        dockerfile: Dockerfile
      ports:
        - "3000:3000"
      environment:    #设置东八时区上海时间
        - SET_CONTAINER_TIMEZONE=true
        - CONTAINER_TIMEZONE=Asia/Shanghai
      volumes:    #挂载宿主机东八时区
        - /etc/localtime:/etc/localtime:ro
  nginx:
    restart: always
    image: nginx
    ports:
      - "80:80"
    environment:    #设置东八时区上海时间
        - SET_CONTAINER_TIMEZONE=true
        - CONTAINER_TIMEZONE=Asia/Shanghai  
    volumes:
      - ./nginx/conf.d/:/etc/nginx/conf.d
      - ./utils-dist:/var/www/html/
      - /etc/localtime:/etc/localtime:ro

注:如果项目中有使用定时任务,需要配置时区,其他配置自行查看docker-compose文档

四、node项目配置

进入自己的node目录下,创建Dockerfile文件编写配置

FROM node:12-slim

# Install latest chrome dev package and fonts to support major charsets (Chinese, Japanese, Arabic, Hebrew, Thai and a few others)
# Note: this installs the necessary libs to make the bundled version of Chromium that Puppeteer
# installs, work.
RUN apt-get update \
    && apt-get install -y wget gnupg \
    && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
    && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
    && apt-get update \
    && apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf libxss1 \
      --no-install-recommends \
    && rm -rf /var/lib/apt/lists/*

WORKDIR /nodeapp

ADD ./server /nodeapp/server
ADD ./package.json /nodeapp

RUN mkdir -p /nodeapp/logs \
    && npm i

EXPOSE 3000

# Install puppeteer so it's available in the container.
# Add user so we don't need --no-sandbox.
# same layer as npm install to keep re-chowned files from using up several hundred MBs more space
RUN groupadd -r pptruser && useradd -r -g pptruser -G audio,video pptruser \
    && mkdir -p /home/pptruser/Downloads \
    && chown -R pptruser:pptruser /home/pptruser \
    && chown -R pptruser:pptruser /nodeapp

# Run everything after as non-privileged user.
USER pptruser

CMD ["node", "./server/index.js"]

注:如果项目中有使用puppeteer这个包,28-34行是需要配置的

五、nginx配置

在nginx文件夹下创建一个conf.d的文件夹,在再该文件夹下创建nginx的.conf配置文件

server {
    listen *:80;
    listen [::]:80;
    server_name localhost;
    return 301 http://localhost$request_uri;
}

server {
    listen *:80;
    listen [::]:80;
    server_name  localhost;
    location / {
        root   /var/www/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location /api {
       # 允许跨域请求的“域”
       # add_header 'Access-Control-Allow-Origin' $http_origin;
       # 允许客户端提交Cookie
       # add_header 'Access-Control-Allow-Credentials' 'true';
       # 允许客户端的请求方法
       # add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
       # 允许客户端提交的的请求头
       # add_header 'Access-Control-Allow-Headers' 'Origin, x-requested-with, Content-Type, Accept, Authorization';
       # 允许客户端访问的响应头
       # add_header 'Access-Control-Expose-Headers' 'Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma';
       # 处理预检请求
              if ($request_method = 'OPTIONS') {
                # 预检请求缓存时间
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain; charset=utf-8';
                add_header 'Content-Length' 0;
                return 204;
            }
            proxy_pass  http://app-utils:3000;
            proxy_redirect     off;
            proxy_set_header   Host             $host;
            proxy_set_header   X-Real-IP        $remote_addr;
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
    }

}

localhost改为自己的服务名

六、启动

#启动docker
docker-compose up
#代码更新后重启docker
docker-compose up --force-recreate --build -d

七、docker常用命令

#查看现有容器状态
docker ps -a
#进入容器内容查看日志
docker exec -it id /bin/bash  #id 為docker ps -a查出來的