Ubuntu系统下使用docker容器配置nginx并部署前端项目

1.下载 Nginx 镜像

命令 描述

docker pull nginx	下载最新版 Nginx 镜像`  :
1

2. 创建要挂载的宿主机目录

启动前需要先创建 Nginx 外部挂载的配置文件（ /home/nginx/conf/nginx.conf）
之所以要先创建 , 是因为 Nginx 本身容器只存在 / etc/nginx 目录 , 本身就不创建 nginx.conf 文件
当服务器和容器都不存在 nginx.conf 文件时, 执行启动命令的时候 docker 会将 nginx.conf 作为目录创建 , 这并不是我们想要的结果 。

> mkdir -p /home/nginx/conf
> 
> mkdir -p /home/nginx/log
> 
> mkdir -p /home/nginx/html
1
2
3
4
5

3.容器中的 nginx.conf 文件和 conf.d 文件夹复制到宿主机

# 生成容器
docker run --name nginx -p 80:80 -d nginx
# 将容器nginx.conf文件复制到宿主机
docker cp nginx:/etc/nginx/nginx.conf /home/nginx/conf/nginx.conf
# 将容器conf.d文件夹下内容复制到宿主机
docker cp nginx:/etc/nginx/conf.d /home/nginx/conf/conf.d
# 将容器中的html文件夹复制到宿主机
docker cp nginx:/usr/share/nginx/html /home/nginx/


1
2
3
4
5
6
7
8
9
10

此时会发现宿主机（也就是本机电脑）上的/home/nginx/conf，/home/nginx/log，/home/nginx/html这三个文件夹下已经有容器内的配置文件了

4、创建 Nginx 容器并运行

#停止容器
docker stop nginx
# 删除该容器
docker rm nginx
 
1
2
3
4
5

5.启动容器，并正式挂载对应文件

docker run \
-p 80:80 \
--name nginx \
-v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /home/nginx/conf/conf.d:/etc/nginx/conf.d \
-v /home/nginx/log:/var/log/nginx \
-v /home/nginx/html:/usr/share/nginx/html \
-d nginx

1
2
3
4
5
6
7
8
9

然后基础配置已经完成，在地址栏输入localhost:80端口测试一下，表示已经成功安

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

现在开始配置静态资源路径，保证能够代理到我们想要的静态页面

1.先把我们打包好的前端项目文件(sky)放到指定的文件夹目录下，这里我放到了 本机的/home/nginx/html文件下，对应容器里的/usr/share/nginx/html/sky路径

本机：

• home
  –nginx
  – html
  —sky

容器内：

• usr
• –share
  –nginx
  – html
  —sky

2.然后在/home/nginx/conf/conf.d的

defalult.conf

这个默认配置文件中配置自定义静态资源路径，一定要在默认里配置，我试了一下只在nginx.conf文件里配置是不行的

server {
        listen       80;
        server_name  localhost;
        location / {
        	#这里指的是自己前端项目存放路径（容器里的路径，不是本机）
            root   /usr/share/nginx/html/sky;
            index  index.html index.htm;
        }

1
2
3
4
5
6
7
8
9

每次更改配置文件一定要重启docker里的nginx服务
配置完成之后在地址栏输入localhost:80端口可访问到我们自己项目登录页面

3.配置反向代理来跟后端tomcat服务器相连接，来保证登录进入系统，同样在default.conf文件里配置，注意下面的地址不能写localhost，如果写localhost指的是容器里的本机地址，下面地址要换成宿主机，也就是现在本机的IP地址（默认后端服务器运行在8080端口下）

# 反向代理,处理管理端发送的请求
        location /api/ {
            proxy_pass   http://192.168.1.102:8080/admin/;
            #proxy_pass   http://webservers/admin/;
        }

1
2
3
4
5
6

每次更改配置文件一定要重启docker里的nginx服务

5.启动后端服务器

6.点击前台页面登录按钮

成功登录进入系统，表示前后端联调成功，项目部署完毕。