避开Docker部署前后端分离项目的坑 - 如何部署前端项目

r囧r小猫 2023-02-26 02:22 47阅读 0赞

在之前的几篇文章里，主要是介绍了如何用Docker来部署后端Node.js及数据库mongodb

今天来介绍一下如何使用docker来部署前端代码及解决前端跨域问题

首先需要引入主角nginx

Nginx简单来讲就是一个反向代理服务器。先来看看什么是代理服务器？代理服务器一般是指局域网内部的机器通过代理服务发送请求到互联网上的服务器，代理服务器一般作用于客户端。如下图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzMTMzNzgz_size_16_color_FFFFFF_t_70][]

正向代理是一个位于客户端和原始服务器之间的服务器，为了从原始服务器取的内容，客户端向代理发送一个请求并**指定目标**（原始服务器），然后代理向原始服务器转交请求并将获得的内容返回给客户端，客户端必须要进行一些特别的设置才能使用正向代理。  
而要介绍的nginx是一种反向代理服务器：在服务器端接收客户端的请求，然后把请求分发给**具体的服务器进行处理**，然后再将服务器的响应结果反馈给客户端。

这里可以理解一下两者的差异是：对于正向代理是由客户端指定了目标，负责正向代理的中间角色只是按照客户要求直接传递内容给目标服务器。但是，对于反向代理而言，客户只是告诉需要的内容（请求），反向代理服务器自己去分配任务给具体的服务器，完成任务之后再讲结果告诉客户(反应)。

另外，正向代理客户端必须设置正向代理服务器，当然前提是要知道正向代理服务器的IP地址，还有代理程序的端口。而反向代理正好与正向代理相反，对于客户端而言代理服务器就像是原始服务器，并且客户端不需要进行任何特别的设置。客户端向反向代理的命名空间中的内容发送普通请求，接着反向代理将判断向哪个原始服务器转交请求，并将获得的内容返回给客户端。

所以总结下：正向代理：客户端知道服务器端，通过代理端连接服务器端。**代理端代理的是服务器端**。反向代理：所谓反向，是对正向而言的。服务器端知道客户端，客户端不知道服务器端，通过代理端连接服务器端。**代理端代理的是客户端**。**代理对象刚好相反，所以叫反向代理。**

nginx本身是一个web服务器，所以可以提供web服务。我们使用nginx来部署前端javascript代码。首先按照之前的介绍，我们需要编写一个Dockerfile文件来自定义nginx容器：

>     FROM nginx:1.15
>     COPY build/  /usr/share/nginx/html/
>     
>     ADD nginx/conf.d/default.conf /etc/nginx/conf.d/
>     
>     WORKDIR /usr/share/nginx/html
>     
>     RUN chmod -R a+rx *

这里采用了外部手动先npm run build 打包好前端项目生成build文件夹，然后COPY拷贝到容器中。

这里ADD将nginx的配置文件也加到容器当中，nginx配置文件一会再详细介绍。接着设置工作目录。

在编写好Dockerfile之后，使用docker -compose.yml文件来进行自动化部署。

>     version: '3.0'
>     
>     services:
>       nginx:
>         restart: on-failure
>         build:
>           context: ./
>           dockerfile: Dockerfile
>         container_name: web-fontend
>         ports:
>           - 80:80

这里，docker-compose.yml文件也非常简单，build中指定在生成容器的时候，使用我们自定义的Dockerfile文件。暴露端口号为80。

下面重点介绍下如何修改nginx的配置文件default.conf:

在这个文件中，我们需要修改一些内容。比如，我们需要给后端服务器设定代理路径。

>     server {
>         listen 80;   // 监听80端口
>         server_name  localhost;  // 本地服务器
>         location = /50x.html {
>             root  /usr/share/nginx/html;
>         }
>     
>         location / {    // 前端代理
>             root    /usr/share/nginx/html;
>             index   index.html index.htm;
>             autoindex on;
>             try_files $uri $uri/ /index.html =404;
>         }
>     
>         location /api/ {  // 后端代理
>             proxy_pass http://172.24.0.1:5000;
>         }
>     }

localtion ／\{\}中的内容是关于前端内容的代理，root中设置好我们之前npm run build之后的build文件夹，在启动nginx时会自动代理前端。但是，我们需要对后端的反向代理进行配置，不然会出现前端跨域问题。proxy\_pass 中是配置后端的ip+端口号，因为是本地docker配置nginx所以这里的ip是启动的后端服务的docker容器的网关(Gateway)地址，端口指定为5000。**注意：这里一定是网关地址，而不是ip地址 比如：172.24.0.4。**因为使用docker inspect+容器 分别去查看两个docker容器，发现nginx容器和后端服务的容器在两个网段，所以需要配置好网关才能进行通信，不然会报错。报错大概是会连接upstream超时。

以上就是在前后端分离的项目里，分别编写了docker-compose.yml文件来启动前后端的服务，并进行了反向代理。如果这篇文章对你有帮助，不妨给我点个赞，是我继续分享的动力！

参考文献：

1. [https://www.jianshu.com/p/024280b0a179][https_www.jianshu.com_p_024280b0a179]

2. [https://i4t.com/2739.html][https_i4t.com_2739.html]

3. [https://shaohualee.com/article/955][https_shaohualee.com_article_955]

4. [https://www.cnblogs.com/soulleoo/p/12532213.html][https_www.cnblogs.com_soulleoo_p_12532213.html]

5. [https://www.jb51.net/article/168730.htm][https_www.jb51.net_article_168730.htm]

6. [https://www.cnblogs.com/muhy/p/10528543.html][https_www.cnblogs.com_muhy_p_10528543.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzMTMzNzgz_size_16_color_FFFFFF_t_70]: /images/20230209/186c441deba842d6906894d5967d8a88.png
[https_www.jianshu.com_p_024280b0a179]: https://www.jianshu.com/p/024280b0a179
[https_i4t.com_2739.html]: https://i4t.com/2739.html
[https_shaohualee.com_article_955]: https://shaohualee.com/article/955
[https_www.cnblogs.com_soulleoo_p_12532213.html]: https://www.cnblogs.com/soulleoo/p/12532213.html
[https_www.jb51.net_article_168730.htm]: https://www.jb51.net/article/168730.htm
[https_www.cnblogs.com_muhy_p_10528543.html]: https://www.cnblogs.com/muhy/p/10528543.html