Docker部署前端项目 优劣 docker 前端安装部署

• 作者：一个在外讨生活的新时代农民工。

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

• 前言
• 制作docker-compose.yml文件
• 创建挂载目录
• 创建Nginx配置文件
• 前端工程部署
• 启动容器
• 放开端口

• 放开防火墙端口

• 访问一下我们的前端吧
• 后记

前言

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

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

• 你本地需要有docker，以及docker-compose。
• 需要了解docker-compose是干什么的。
• 需要了解docker-compose.yml配置项。
• 需要知道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

创建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

如图所示启动成功了。

放开端口

因为我们前端配置了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。

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

后记

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

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

我们下期再见。