前后端入门-vue 项目 docker 打包部署-解决跨域请求

1 环境

# 软件版本

npm 6.14.15

centos 7.6

docker 20.10.8

docker-compose v2.6.1

node 14.17.6

vue 2.9.6

nginx 1.23.4

2 项目结构介绍

路径没有硬要求，后续打包时填写目录正确即可。

project
├── docker_env			# dockerfile配置目录
│   ├── nginx
│   │   └── my.conf		# nginx配置目录
│   └── web
│       └── DockerfileBuild	# web dockerfile build配置文件

└── hippo_web
    ├── build
    ├── config
    ├── dist
    ├── index.html
    ├── node_modules
    ├── package.json
    ├── package-lock.json
    ├── README.md
    ├── src
    ├── st
    └── static

3 前期准备

3.1 vue源码部分调整-为实现跨域请求

# 主要修改vue axios请求后端url部分
# 所有请求后端的url前添加/api 字符串,方便同一个主机不同端口实现访问后端接口
# 如：
this.$axios.post(`/api/users/login/`,{}

3.2 vue项目打包

# 进入项目hippo目录
cd project/hippo_web
# npm打包vue项目
npm run build

# project/hippo_web下生成dist目录

3.3 编写nginx配置文件

# my.conf
server {
    listen       8080;
    server_name localhost;
    client_max_body_size 100M;
    location / {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
        root /usr/share/nginx/html;
        index  index.html index.php index.htm;
        try_files $uri $uri/ /index.html; # 实现网页刷新时跳转原网页 一定要加
    }

    location /api/ { 	# 后端api部分跳转
        proxy_set_header Host $http_host;
        proxy_set_header  X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        rewrite ^/api/(.*)$ /$1 break;  #重写
        proxy_pass http://192.168.192.10:8000/; # 设置代理服务器的协议和地址 本地宿主机192.168.192.10
   }
}

4 Dockerfile编写

# 拉取基础镜像
FROM nginx:alpine

# 拷贝nginx配置文件
COPY ./docker_env/nginx/my.conf /etc/nginx/conf.d/my.conf

# 拷贝打包好的项目
COPY ./hippo_web/dist /usr/share/nginx/html

5 打docker基础Build包

# docker build
# 进项目目录
cd project/
docker build -f ./docker_env/web/DockerfileBuild -t vue_web_img:v1 .


# docker build 参数
docker build -f Dockerfile -t ImageName:TagName dir

# 选项
-f Dockerfile配置文件
Dockerfile  镜像配置的Dockerfile 存放位置
-t 给镜像加一个Tag
ImageName 给镜像起的名称
TagName 给镜像的Tag名
Dir Dockerfile所在目录

# 查看打包生成的镜像
docker images
REPOSITORY          TAG       IMAGE ID       CREATED             SIZE
vue_web_img                     v1               d6f6f145ebc7   22 minutes ago   57.4MB

6 运行docker容器及验证服务

# 启动容器，服务自启动，打包时以写入
docker run -it -d -p 8080:8080 --name myweb11 vue_web_img:v1

# 浏览器访问
http://192.168.192.10:8080

# 查看容器运行状态
docker ps

CONTAINER ID   IMAGE                      COMMAND                  CREATED          STATUS          PORTS                                               NAMES
c2bb6d7ed428   vue_web_img:v1             "/docker-entrypoint.…"   26 minutes ago   Up 26 minutes   80/tcp, 0.0.0.0:8080->8080/tcp, :::8080->8080/tcp   myweb
f3a6d8209737   django_docker_img_new:v1   "/backend/docker_sta…"   26 hours ago     Up 20 minutes   0.0.0.0:8000->8000/tcp, :::8000->8000/tcp           mysite