docker部署前后端分离项目

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;