【docker-compose安装nginx并部署前端项目】

r囧r小猫 2024-03-23 11:54 75阅读 0赞

![在这里插入图片描述][6e1bbb998a3e4c81b55c6824c75edd34.gif_pic_center]

>  *  **作者：一个在外讨生活的新时代农民工。**
>  *  **博主主页: [@佳庆][Link 1]**
>  *  **所属专栏: [Docker][]**
>  *  **支持我: 点赞+收藏+留言。您的支持是我最大动力。**

#### docker-compose安装nginx并部署前端项目 ####

*   *   *  前言
         *  制作docker-compose.yml文件
         *  创建挂载目录
         *  创建Nginx配置文件
         *  前端工程部署
         *  启动容器
         *  放开端口
         *   *  放开防火墙端口
         *  访问一下我们的前端吧
         *  后记

#### 前言 ####

因为最近在公司，需要安装一套测试环境，便实操沉淀了此篇文章，后续会出一篇Docker的基础知识以及原理。

docker-compose安装nginx的前提条件：

*  你本地需要有docker，以及docker-compose。
 *  需要了解docker-compose是干什么的。
 *  需要了解docker-compose.yml配置项。
 *  需要知道docker-compose常用命令。

您如果之前不知道呢，可以点击我的专栏，**Docker专栏里面有一篇文章【docker-compose】讲解与安装。**

#### 制作docker-compose.yml文件 ####

我们列一下docker-compose配置项：

*  image: 镜像的名称以及版本号，我们采用的是官方的1.21.3：nginx:1.21.3
 *  restart: 重启docker后该容器启动时机，默认是不启动，我们配置always，重启docker后该容器也重启。
 *  container\_name: 容器名称，我们配置为nginx
 *  ports: 本地端口号与容器内部端口号映射，我们配置为80:80 443:443 9080:9080（我们前端工程要用到的端口）
 *  volumes：指定挂载目录，我们配置了四个/usr/etc/nginx/html:/usr/share/nginx/html，/usr/etc/nginx/log:/var/log/nginx，/usr/etc/nginx/conf/nginx.conf:/etc/nginx/nginx.conf，/web:/web(这个是我们前端工程用到的目录)。

这样我们的docker-compose.yml文件就创建好了。

执行命令，此命令意思是如果当前文件下不存在此文件就创建。

vim docker-compose.yml

然后把我们的配置项填写进去。如下面的yml内容。

version: '3'
    services:
    
    	nginx:
          image: nginx:1.21.3 #镜像名称以及版本
          restart: always #重启docker后该容器也重启
          container_name: nginx #容器名称
          ports:
            - 80:80 #本地端口号与容器内部端口号
            - 443:443 #本地端口号与容器内部端口号
            - 9080:9080 #本地端口号与容器内部端口号
          volumes: #指定挂载目录
            - /usr/etc/nginx/html:/usr/share/nginx/html
            - /usr/etc/nginx/log:/var/log/nginx
            - /usr/etc/nginx/conf/nginx.conf:/etc/nginx/nginx.conf
            - /imp:/imp

#### 创建挂载目录 ####

如上面的yml配置，我们要在/usr/etc/nginx下创建三个目录。

这个简单，使用我们的命令直接创建几个挂载目录。

下面的命令解读一下：mkdir -p 批量创建文件夹。

mkdir -p /usr/etc/nginx/{
        html,log,conf}

然后创建一个前端工程目录

mkdir /web

![65bb2293ff09d969de58147406c14d94.png][]

#### 创建Nginx配置文件 ####

执行如下命令。

进入到我们映射的目录

cd /usr/etc/nginx/conf

通过命令vim nginx.conf创建配置文件

配置如下信息。

worker_processes  1;
    
    events {
        
        worker_connections  1024;
    }
    
    
    http {
        
        include       mime.types;
        default_type  application/octet-stream;
        sendfile        on;
        keepalive_timeout  65;
    
        server {
        
            listen       9080;
            server_name  localhost;
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
            add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
    
        if ($request_method = 'OPTIONS') {
        
            return 204;
    }
    
            location /  {
        
                alias   /web/web_ui/;
                index  index.html;
                try_files $uri $uri/ /index.html;
            }
    
    
            location /common/  {
        
                alias   /web/web_usercenter_ui/;
                index  index.html;
                try_files $uri $uri/ /common/index.html;
            }
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
        
                root   html;
            }
        }
    
    
    }

主要给大家讲解一下service的配置。

listen：监听的端口。我们配置的是9080。

server\_name：服务地址ip，我们配置的是localhost就是127.0.0.1

add\_header：配置响应体，告诉浏览器一些头信息

*  Access-Control-Allow-Origin \* ：服务器默认是不允许跨域的。Nginx配置\*\*Access-Control-Allow-Origin \*\*\* ，表示可以接受所有的请求源（Origin）,即接受所有跨域的请求。
 *  Access-Control-Allow-Methods ‘GET,POST,PUT,DELETE,OPTIONS’：设置跨域的请求类型，返回对应的请求类型。
 *  Access-Control-Allow-Headers ‘DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization’：设置跨域请求允许的Header头信息字段，以逗号分隔的字符串，返回给浏览器。

location：配置url与nginx相匹配，下面我配置了两个一个是 **/** ,一个是 **/common/** ，主要是不同的url路径走不同的前端工程。

alias：访问路径别名指令，默认情况下，本地文件的路径是 root 指令设定根目录的相对路径。

server {
        
            listen       9080;
            server_name  localhost;
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 'GET,POST,PUT,DELETE,OPTIONS';
            add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
    
        if ($request_method = 'OPTIONS') {
        
            return 204;
    				}
    
            location /  {
        
                alias   /web/web_ui/;
                index  index.html;
                try_files $uri $uri/ /index.html;
            }
    
    
            location /common/  {
        
                alias   /web/web_usercenter_ui/;
                index  index.html;
                try_files $uri $uri/ /common/index.html;
            }
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
        
                root   html;
            }
    		}

#### 前端工程部署 ####

这里就只说我们的项目了，因为我们是前后的分离项目，前端使用的vue，把前端对应的工程build好后的dist文件丢到上面的配置路径就可以了。

#### 启动容器 ####

如上面所述，我们的相关配置和准备条件都做好了，我们开始启动我们的容器吧。

执行命令，此命令意思是 up -d 后台启动并运行容器。

docker-compose up -d nginx

我们来查看一下日志。执行命令。此命令的意思就是查看容器日志，守护线程查看展示1000条。

docker-compose logs -f --tail 1000 nginx

如图所示启动成功了。

![e96fad967210815e48c46955c316b4a9.png][]

#### 放开端口 ####

因为我们前端配置了9080端口，nginx容器映射的端口也是9080。所以我们要放开9080端口。

分为两种情况。

**第一种你的服务器如果是阿里云，腾讯云，云服务商等。**

需要开启安全组端口9080（因为我们映射的端口是9080）

看服务器是否开启了防火墙。如果开启了防火墙需要放开端口，这个我下面讲解怎么放开端口。

**第二种你的服务器是虚拟机的话**

查看服务器是否开启了防火墙。如果开启了防火墙需要放开端口，这个我下面讲解怎么放开端口。

##### 放开防火墙端口 #####

查看防火墙放开的端口

firewall-cmd --zone=public --list-ports

放开3306端口

firewall-cmd --zone=public --add-port=9080/tcp --permanent

刷新防火墙

firewall-cmd --reload

#### 访问一下我们的前端吧 ####

服务器ip:9080加你nginx配置的url。

如下图所示，前端工程就部署成功了，因为比较隐私，我就打码了。

![f654406c6137ef7ca3a900bfe76779be.png][]

#### 后记 ####

本文主要讲解docker-compose安装Nginx。并且怎么去配置，部署前端项目。实操沉淀下来的文章。

如果你有问题或者建议欢迎大家评论区讨论。

**如对您有用，希望你可以点赞，收藏，评论，您的支持是我最大动力。**

**我们下期再见。**

![e937783d358e453c7c96290b75b77fd3.gif][]

[6e1bbb998a3e4c81b55c6824c75edd34.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/ce14e2030ff34d36a12ee415c20200c3.png
[Link 1]: https://blog.csdn.net/qq_45374325?spm=1010.2135.3001.5343
[Docker]: https://blog.csdn.net/qq_45374325/category_12280118.html?spm=1001.2014.3001.5482
[65bb2293ff09d969de58147406c14d94.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/ed9ed783dbca4c68816a3ecc73b00684.png
[e96fad967210815e48c46955c316b4a9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/e0d15a547d1f438dadaf54b15c3b4334.png
[f654406c6137ef7ca3a900bfe76779be.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/7cc2b789a43c4386885f4a2e997a4f80.png
[e937783d358e453c7c96290b75b77fd3.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/5dbfd87187ed4f0eba9206d0fa1988cd.png