nginx运行前端项目

nginx 运行前端项目

环境

linux

docker

准备工具

nginx.conf

server {
    listen       18180 default_server;
    server_name  _;
	
	#保存前端项目的路径
    root /usr/share/nginx/dist;
    index index.html;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        try_files $uri /index.html;
    }


	#转发到后端的 springboot 程序
    location /api/ {
        proxy_pass http://127.0.0.1:8180;
        proxy_set_header Host $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;
    }

}

Dockefile

FROM m.daocloud.io/docker.io/nginx:1.20.2-perl

# 删除默认配置
RUN rm /etc/nginx/conf.d/default.conf

# 拷贝自定义 nginx 配置
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 拷贝前端 dist 文件
COPY dist /usr/share/nginx/dist


CMD ["nginx", "-g", "daemon off;"]

前端打包文件(npm run build:prod)

dist/

laihz@i7:~/project/datax/datax-front$ ls dist
avatar.jpg  favicon.ico  index.html  static

运行

构建镜像

sudo docker build -t datax-front-images:1.0 .

运行容器

sudo docker run -d --privileged --network=host -itd --name datax-front  datax-front-images:1.0

注意事项

  1. nginx.conf的root配置项目一定要和真实的前端文件夹一致
  2. Dockerfile的 COPY dist /usr/share/nginx/dist ，这样写才是把dist 放在/usr/share/nginx下面