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

1.下载 Nginx 镜像

命令 描述

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

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

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/


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

4、创建 Nginx 容器并运行

#停止容器
docker stop nginx
# 删除该容器
docker rm nginx
 

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

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

Ubuntu系统下使用docker容器配置nginx并部署前端项目_第1张图片

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

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

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;
        }

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

Ubuntu系统下使用docker容器配置nginx并部署前端项目_第2张图片

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

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

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

5.启动后端服务器

Ubuntu系统下使用docker容器配置nginx并部署前端项目_第3张图片

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

Ubuntu系统下使用docker容器配置nginx并部署前端项目_第4张图片
Ubuntu系统下使用docker容器配置nginx并部署前端项目_第5张图片

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

你可能感兴趣的:(ubuntu,docker,nginx)