Docker利用Nginx部署前端项目2

之前的方法是修改了nginx.conf配置文件，通过之后的深入了解，发现Nginx中还有一个default.conf配置文件也可以帮我们来搭建前端，而且我这里还携带了反向代理，可能不是很好用，建议验证后使用。

1.老方法，先构建Dockerfile文件

FROM nginx:latest
 
#将配置文件复制到Nginx指定文件夹下
COPY ./app /opt/front/app
COPY ./default.conf /etc/nginx/conf.d

解释：利用nginx镜像环境，将前端项目app复制到指定文件夹，将default.conf复制到conf.d文件夹下。

2.编写default.conf文件

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;
	add_header X-Frame-Options ALLOWALL;
    location / {
        root   /opt/front/app;
        index  index.html index.htm;
		add_header X-Frame-Options ALLOWALL;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    location /auth {
       proxy_hide_header X-Frame-Options;
       add_header X-Frame-Options ALLOWALL;
       proxy_pass   http://192.168.1.252:9099/auth;
       proxy_set_header Upgrade    $http_upgrade;
       proxy_set_header Connection $http_connection;
       proxy_set_header Host       $host;
       proxy_set_header X-Real-IP       $remote_addr;
       proxy_set_header REMOT-HOST   $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location /gateways/ {
       proxy_hide_header X-Frame-Options;
       add_header X-Frame-Options ALLOWALL;
       proxy_pass   http://192.168.1.252:12000/;
       proxy_set_header Upgrade    $http_upgrade;
       proxy_set_header Connection $http_connection;
       proxy_set_header Host       $host;
       proxy_set_header X-Real-IP       $remote_addr;
       proxy_set_header REMOT-HOST   $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }


}

解释：location / 中表示访问ip+端口就会跳转前端首页，root处为前端项目路径，index则为你的前端首页，建议命名为index。

location /auth、location /gateways/则为反向代理，注意代理地址（我是复制同事的代码，建议大家测试后再使用）

erro_page等错误跳转是固定内容，这里不再赘述。

其他未解释的变量都是默认的，不用动。

3.上传到Linux服务器，并开始打包镜像

将你的前端项目和配置文件放入同一目录下：

4.执行Docker命令打包镜像

首先 cd 目录，让控制台进入你的配置文件目录下，然后执行以下docker命令：

docker build . -f Dockerfile -t my-app:1.0

解释：构建了一个名为my-app的镜像。

4.启动容器

此处只做展示，具体需要添加什么变量，依照自己想法做就好（我相信此刻的你应该熟悉docker命令了）

docker run -d --name app -p 9000:80 my-app:1.0

5.访问前端

通过ip+端口即可访问，本地部署：localhost+端口

以上就是本次分享的全部内容，感谢您本次的阅读。

为什么写了这篇文章：通过了解nginx配置文件，nginx默认的nginx.conf文件自动加载了conf.d文件夹的全部配置文件，因此我们可以不用像之前那样直接配置nginx.conf文件，直接重写default.conf文件就可以了，比之前的方法更加简单易懂。

Docker利用Nginx部署前端项目2

猜你喜欢