四十五、docker之nginx手动部署前端项目

 nginx的作用:

一、静态文件服务器和反向代理django服务

django框架中的静态文件服务只在开发调试时提供服务,当以生产模式运行时需要将静态文件部署到静态文件服务器上。

1. 收集django项目中的静态文件

在配置文件中配置STATIC_ROOT

我们在我的项目中里base_setting的配置文件中添加一下。

STATIC_ROOT = BASE_DIR / 'static'

然后运行命令 python manage.py collectstatic,会将项目中所需要的静态文件收集到STATIC_ROOT目录下。

大家看我后端项目中是不是多了一个static这个文件夹~

u 运行完之后,我们就把 STATIC_ROOT = BASE_DIR / 'static' 这行代码删掉,然后git add . 等提交代码到gitee远程仓库上面去。然后在云服务器上面的当前项目里再git pll拉取下来,这个时候我们云服务器上面的当前项目里就有static这个文件夹啦。

在服务器上创建nginx 文件夹,将static目录拷贝到其中。

cp -r ./django_app/static ./nginx/

 

2. 配置静态文件服务器

Nginx 入门系列 - 测试派[链接] [链接] [链接] [链接] [链接]。欢迎来到testingpai.com! 。这是一个属于测试人员的小众社区,大家相互信任,以平等自由,热情奔放的价值观进行分享交流。希望大家能够找到与自己志同道合的伙伴,共同成长。http://testingpai.com/article/1652102129778下载 nginx:alpine

docker pull nginx:alpine

启动nginx容器  

docker run -it --name ck13_nginx --network ck13 nginx:alpine /bin/sh

查看配置文件存放路径: 

 把nginx的配置文件拷贝到当前目录下:

docker cp ck13_nginx:/etc/nginx/nginx.conf ./

我们查看一下配置文件的结构: 

我们看到最下面一行include /etc/nginx/conf.d/*.conf ,所以我们再把此目录下的conf文件复制过来看下是啥意思。

docker cp ck13_nginx:/etc/nginx/conf.d/ ./

一个server{} 代表一个服务

listen: 80          # 监听端口

server_name:localhost         # 可以写你的主机也可以写你的域名。一个端口配几个域名就需要几个server{}

location / : 定位的指令。 /代表根

        root /usr/share/nginx/html        # root是指文件的根目录

 修改端口为9400:

vi default.conf

修改完之后需要重新加载配置:

nginx -s reload

 试了一下 好像不行,那我们只能关掉nginx,再重新启动

排查问题发下我们上面还没映射端口,删掉容器 重新创建一个:(记得云服务器安全组去开放9400端口)

docker run -it --name ck13_nginx -p 9400:80 --network ck13 nginx:alpine /bin/sh

 我们查看上述说的 conf文件中 location 里    root /usr/share/nginx/html  # root是指文件的根目录

此时我们访问 www.hhxpython.com 返回/usr/share/nginx/html/index.html文件

 

 

我们在当前目录下创建一个aaa.txt

那此时 如果我们访问的路径是:

www.hhxpython.com/aaa.txt  返回/usr/share/nginx/html/aaa.txt

 这个时候我们去访问,就出来了。

其实这就是我们说的静态文件服务

那如果我们把配置文件改成这样子

 

 

修改云服务器上面刚才把nginx配置文件目录复制到云服务器里面的项目里面的nginx目录下配置文件

 

我们把原来创建的nginx干掉,重新创建一个。

docker ps | grep nginx

docker stop ck13_nginx

docker rm ck13_nginx

 

在重新生成容器之前,我们希望把上面我们刚刚创建的static目录和conf.d目录拷贝过去。

我们重新启动一个nginx容器

 

docker run -d --name ck13_nginx -p 9400:80 -v /ck13/manual/nginx/conf.d:/etc/nginx/conf.d -v /ck13/manual/nginx/static:/usr/share/nginx/html/static --network ck13 nginx:alpine

 进入这个容器发现default.conf已经映射过来了。

接下来我们再看static有没有映射进来, cd到/usr/share/nginx/html/。

是不是映射进来啦。

 好,那我们现在想在浏览器上随便访问下面这一张图片,我该怎么办呢?

 我们现在直接访问,为什么访问不了?因为我们现在还没有配。

 

 那现在我们想找到怎么办呢?输入以下网址:

http://123.60.113.190:9400/static/admin/img/icon-addlink.svg

加号+ 是不是出来啦。

怎么实现的呢?我们来讲解一下:

所以最后找的文件就是/usr/share/nginx/html/static/admin/img/icon-addlink.svg

有些人会问,那你怎么知道admin/img/icon-addlink.svg? 因为你后端django项目这个图片存放路径就是这个哇。

 

有些人还会问,那为啥location里面不用root呢?为什么改成alias?

因为你用root的话是指文件的根目录,不管匹配路径,都是把域名后面的路径和根目录拼接到一起。 但是你有/static/这个前缀哇。当然了你要用root写的话也可以改成这样子。

你可以这么访问:

地址:  域名:端口/static/admin/img/icon-addlink.svg

但是这样子的话,有一个不好的地方,是不是别人都能知道你的路径啦?

 

 3. 配置django后端服务

那这个后端服务是怎么配的呢?其实跟上面静态服务配置是一样的。

以前我们启动django后台服务是不是这么操作的?点击绿色三角形图标 ,那我们点击一下看看效果,然后打开这个地址 。

 

我们看到这些都是静态文件,访问接口也是直接返回一个html页面,这个是前后端不分离。

可以看到静态文件和接口访问的域名都是在同一个域名上面。

所以我们现在配置的时候,需要配置到同一个server{}里面。

 所以我们上面在server{}里面配置了静态文件的服务,我们还要在这个server{}里面配置django的服务。所以我们还要再加一个location。

第二个location里面,

try_files $uri @proxy_to_app 检查静态文件,如果不是的话就代理到应用。

下面应用做了哪些事情?设置代理头、请求的协议。这里我们可以去看一些文档。

我们看下gunicorn的官方文档。 

proxy_pass http://app_server;配置成proxy_pass http://ck13_django:8000;为啥可以这么写,之前说过了,可以直接配成容器名(ck13_django)进行解析。端口是8000。这样子我们就做到了反向代理。

 

 

在etc/nginx/conf.d/defaultconf新增配置之后,需要重新启动。

然后我们直接云服务器域名:端口,是不是能直接访问啦。

 那为啥我们之前云服务器域名:9321,是这个样子的呢。

那是因为你少了静态文件。

 

4. 部署前端项目

(1)打包前端项目

打包前端项目,会有一个dist文件夹。将dist文件夹拷贝到nginx容器中里的nginx文件夹中。

# 打包前端项目, 自动生成一个dist文件夹。
npm run build

 此时我们需要将dist文件夹也要映射到nginx容器里,所以我们需要停止和删除nginx容器,重新去创建一个nginx容器

# 1.停止nginx容器
docker stop ck13_nginx
# 2.删除nginx容器
docker rm ck13_nginx
# 3.重新创建一个容器(将dist文件夹映射到nginx容器里)
docker run -d --name ck13_nginx -p 9400:80 -v /ck13/manual/nginx/conf.d:/etc/nginx/conf.d -v /ck13/manual/nginx/static:/usr/share/nginx/html/static -v /ck13/manual/nginx/dist:/usr/share/nginx/html/dist --network ck13 nginx:alpine 

 

 

(2)配置nginx

1. 在default.conf(/ck13/manual/nginx/conf.d,也就是云服务器中的项目和nginx存放路径)中增加如下配置。我们需要再写一个server{}。

server {
    listen 81;  # 配置前端项目服务的监听端口
    server_name   localhost;  # 配置域名(没有一样的端口,所以地址可以不管他)
    root /usr/share/nginx/html/dist;            # 配置文件根路径

    location / {

       try_files $uri $uri/ @router; #需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
       index index.html;  # 如果是 斜杠/的话 就会直接返回index.html
    }

    #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
    #因此需要rewrite到index.html中,然后交给路由在处理请求资源
    location @router {
             rewrite ^.*$ /index.html last;
    }
}

2. 然后我们又需要重新启动一下nginx容器。为什么呢?因为我们需要映射上面配置文件中的81端口。

# 1.停止nginx容器
docker stop ck13_nginx
# 2.删除nginx容器
docker rm ck13_nginx
# 3.重新创建一个容器(将dist文件夹映射到nginx容器里)
docker run -d --name ck13_nginx -p 9400:80 -p 9500:81 -v /ck13/manual/nginx/conf.d:/etc/nginx/conf.d -v /ck13/manual/nginx/static:/usr/share/nginx/html/static -v /ck13/manual/nginx/dist:/usr/share/nginx/html/dist --network ck13 nginx:alpine 

备注:如果是先重新启动nginx容器,后去修改配置文件的话(先走上述2再走1的操作的话),我们就需要重启nginx。

# 进入容器
docker exec -it ck13_nginx sh

# 重新加载
nginx -s reload

都配置完之后,我们去访问域名:9500,就跳转到了首页。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值