docker部署前后端分离项目

前提，服务器环境是docker环境，如果服务器没有安装docker，可以先安装docker环境。
各个环境安装docker：
Ubuntu上安装Docker：
ubuntu离线安装docker:
CentOS7离线安装Docker：
CentOs7在线安装docker:
docker安装成功后，执行docker ps命令
在这里插入图片描述

一、打包一个前端项目

1.1 创建安装目录

在自己安装的目录先创建三个文件夹
mkdir config frontend logs
将打包好的前端项目dist,上传到frontend 目录下；

1.2 编写Dockerfile

编写一个Dockerfile文件放到frontend 目录下；
Dockerfile：

FROM nginx:latest
COPY ./dist /opt/nginx/aiinspector-frontend3/frontend/dist

FROM nginx:latest 表示基于nginx镜像生成一个新镜像，因此前提是先拉去一个nginx:latest镜像
拉取Nginx最新镜像，docker pull nginx
查看拉取的镜像：docker images
COPY ./dist /opt/nginx/aiinspector-frontend3/frontend/dist 表示复制宿主机中的项目到容器目录；
/opt/nginx/aiinspector-frontend3/frontend/dist 宿主机安装目录
./dist 容器目录

1.3 配置nginx.conf

# 修改监听端口
listen 8000;
listen [::]:8000 default_server;
server_name localhost;

# 修改项目部署路径
root /opt/nginx/aiinspector-frontend3/frontend/dist;

# 修改后端代理路径
location /api {
            proxy_set_header Host $host;  #反向代理过程中可能会丢失Host头          
            proxy_pass http://192.168.124.11:3000;
            proxy_connect_timeout 60s;
            proxy_send_timeout 180s;
            proxy_read_timeout 180s;
            proxy_buffer_size 1M;
            proxy_buffers 8 1M;
            proxy_busy_buffers_size 1M;
}

nginx.conf配置如下

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    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;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;
    client_max_body_size 11m;

    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;
    fastcgi_intercept_errors on;
    proxy_intercept_errors on;

    gzip_vary on;
    gzip on;
    gzip_static on;
    gzip_buffers 16 8k;
    gzip_min_length 1k;
    gzip_comp_level 6;
    gzip_types text/plain
        text/xml
        text/css
        application/x-javascript
        application/xml
        application/xml+rss
        application/javascript
        application/json;

    server {
        #root         /opt/nginx/aiinspector-frontend3/frontend/dist;
        listen 8000;
        listen [::]:8000 default_server;
        server_name localhost;
        #root         /usr/share/nginx/html;


        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;



        location / {
            proxy_set_header HOST $host;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            # 加这个是支持history的路由模式
            try_files $uri /index.html;
            root /opt/nginx/aiinspector-frontend3/frontend/dist;
            index index.html;
            error_page 404 /index.html;
            error_page 405 =200 $request_uri;
            # 跨域配置
            if ($request_method = OPTIONS ) {
                add_header Access-Control-Allow-Origin "*";
                add_header Access-Control-Allow-Methods "POST, GET, PUT, OPTIONS, DELETE";
                add_header Access-Control-Max-Age "3600";
                add_header Access-Control-Allow-Headers
                    "Origin, X-Requested-With, Content-Type, Accept, Authorization";
                add_header Access-Control-Allow-Credentials "true";
                add_header Content-Length 0;
                add_header Content-Type text/plain;
                return 200;
            }
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
        }

       location /api {
            proxy_set_header Host $host;  #反向代理过程中可能会丢失Host头          
            proxy_pass http://192.168.124.11:3000;
            proxy_connect_timeout 60s;
            proxy_send_timeout 180s;
            proxy_read_timeout 180s;
            proxy_buffer_size 1M;
            proxy_buffers 8 1M;
            proxy_busy_buffers_size 1M;
        }

        error_page 404 /404.html;
        location = /404.html {
            root /opt/nginx/aiinspector-frontend3/frontend/dist/index.html;
        }

        # error_page 500 502 503 504 /50x.html;
        # location = /50x.html {
        # }
    }
}

二、编写启动文件

vim build-aiinspector-frontend3.sh
将下面配置复制到build-aiinspector-frontend3.sh文件中

#!/bin/bash

echo "-----clear container start-----"
# 容器名称
rep=frontend3-react
# 判断容器是否存在，存在则先停止容器
if docker ps | grep "$rep";then
        docker stop $rep
fi
# 如果容器已经停止，则删除容器
if docker ps -a | grep "$rep";then
        docker rm $rep
fi
# 如果镜像存在，则删除镜像
if docker images -a | grep "$rep";then
        docker rmi $rep
fi

echo "----clear container end----"

echo "----build docker image satrt----"
# 制作镜像，目录必须是项目的安装路径，且与Dockerfile在同一个目录
docker build -t $rep /opt/nginx/aiinspector-frontend3/frontend || ! echo "build new image error" || exit
echo "----build docker image end----"

echo "----build nginx container start-----"
# 启动容器 
# -d 后台运行，
# -p 8000:8000 -p [宿主机端口:容器端口]，蒋容器为8000的端口映射到宿主机为8000的端口，
# --restart=always，docker 服务重启时此容器自动重启，
# --name $rep 容器名称为 frontend3-react
# -e TZ=Asia/Shanghai ，容器时间为亚洲上海时间
# -v /opt/nginx/aiinspector-frontend3/config/nginx.conf:/etc/nginx/nginx.conf 映射宿主机目录文件nginx.conf到容器的目录文件中/etc/nginx/nginx.conf
docker run -d -p 8000:8000 \
--restart=always \
--name $rep \
-e TZ=Asia/Shanghai \
-v /opt/nginx/aiinspector-frontend3/config/nginx.conf:/etc/nginx/nginx.conf \
-v /opt/nginx/aiinspector-frontend3/logs:/var/log/nginx $rep || ! echo "cannot run container:$rep,exit" || exit
echo "----build nginx container end-------"