【Nginx】Docker安装配置Nginx实现前端项目部署
Nginx流程目录NginxNginx是什么,能做什么基于Docker的Nginx安装和配置1、拉取nginx镜像2、根据镜像创建Nginx容器1、创建一个用于展示的HTML2、创建Nginx容器1、准备挂载目录2、进行容器创建并挂载Nginx是什么,能做什么是什么,能做什么 Nginx是一款自由的、开源的、高性能的HTTP服务器和反向代理服务器;同时也是一个IMAP、POP3、SMTP代理服务
写在前面 : 本文5000字左右,阅读时间大致10分钟左右,属于小白文章,
内容概述 : 通过Docker安装Nginx,并进行一定的资源配置,达到可以访问自己前端项目的目的(本文以html文件做前端示例)
Nginx
流程目录
Nginx是什么,能做什么
是什么,能做什么
Nginx是一款自由的、开源的、高性能的HTTP服务器和反向代理服务器;同时也是一个IMAP、POP3、SMTP代理服务器;Nginx可以作为一个HTTP服务器进行网站的发布处理,另外Nginx可以作为反向代理进行负载均衡的实现,也可通过URL/URI判定实现动静分离。
基于Docker的Nginx安装和配置
1、拉取nginx镜像
可以通过docker search nginx
查找一下然后下载对应版本的镜像。但这里更建议直接通过docker pull nginx
来下载最近版本的nginx(latest版)。
docker pull nginx
直接结果
[root@huzy-aliyun ~]# docker pull nginx
Using default tag: latest
Trying to pull repository docker.io/library/nginx ...
latest: Pulling from docker.io/library/nginx
a076a628af6f: Pull complete
0732ab25fa22: Pull complete
d7f36f6fe38f: Pull complete
f72584a26f32: Pull complete
7125e4df9063: Pull complete
Digest: sha256:10b8cc432d56da8b61b070f4c7d2543a9ed17c2b23010b43af434fd40e2ca4aa
Status: Downloaded newer image for docker.io/nginx:latest
2、根据镜像创建Nginx容器
写在前面
这里要啰嗦几句,面向正式的前段项目的话,建议在linux服务器中创建一个专门存放项目的目录,
如~/project
,目录下存放着各个项目文件。
但本博客先以单个HTML文件做演示(正式项目打包后也是HTML)
1、创建一个用于展示的HTML
1、先通过 cd
移动到项目存放目录下。
若没有专门的存放目录,执行mkdir ~/project/htmlDemo
在root
目录下创建project
文件夹(用于存放项目文件),并在文件夹中创建htmlDemo子目录(相当于项目文件),目录中创建了一个名为test.html
的文件,并用vim
编辑器进行文件内容编辑。
mkdir ~/project/htmlDemo
vim ~/project/htmlDemo/test.html
<html>
<head>
<meta charset="utf-8">
<title>hello nginx</title>
</head>
<body>
<h1>Hello Niginx</h1>
<p>小例子</p>
</body>
</html>
2、创建Nginx容器
这里需要现行了解下挂载概念。说通俗点的理解就是,Docker容器内部的文件(夹),与宿主机(咱们的云服务器)中的文件(夹)进行关联起来,可以实现修改同步。具体体现通过-v
实现。
1、准备挂载目录
在宿主机创建好用于挂载的相关文件夹
- logs :日志文件目录
- conf :配置文件目录
- project :项目文件目录(前面的步骤中已经创建了,并且其中有
htmlDomo/test.html
文件)
通过mkdir ~/nginx/conf
,mkdir ~/nginx/logs
在/root/nginx
目录下创建两个空文件夹
2、进行容器创建并挂载
写在前面
存在问题
挂载操作会直接将两个文件夹内容同步,若是直接用宿主机的空文件夹直 接挂载到容器内部的配置文件目录上,会造成nginx
容器配置文件目录被同步为空文件夹,进而导致容器启动失败。
解决方案
方案一,创建两次nginx
容器,第一次不进行挂载,将容器启动后,将通过docker cp nginx:/etc/nginx/nginx.conf ~/nginx/conf
命令,将容器内部的配置文件拷贝到宿主机的对应目录(~/nginx/conf
),然后删除容器,然后再启动一个用刚才拷贝出的文件进行挂载的nginx容器。
方案二,在创建容器进行挂载目录时,将宿主机挂载目录挂载到nginx
容器内的一个空文件夹上,容器顺利启动,通过docker exec
进入容器,然后将配置文件移动到刚挂载空文件目录下,再将此文件夹通过ln -s
软连接到容器原本的配置文件目录下。
具体步骤如下(此次用方案二)
1、创建容器并挂载(代码有点长,直接复制粘贴回车即可)
docker run -itd --name nginx -p 80:80 -v /root/project:/var/www/html -v /root/nginx/conf:/root/nginx_conf -v /root/nginx/logs:/var/log/nginx nginx
命令详解:
-it
交互式运行终端-d
后台运行--name
容器名-p 80:80
将宿主机的80端口和容器的80端口映射(正式一般只开放80端口,然后通过不同域名映射不同项目,若是自己的服务器测试玩,可以使用--net host
替换掉-p 80:80
为nginx容器开放全部端口监听。)-v
宿主机目录与容器目录进行挂载(可以共享)-v
/root/project:/var/www/html是将宿主机/root/project与容器/var/www/html关联,以后所有的项目都建立在/root/project下,因为关联在/var/www/html,所以容器可以访问到外部的项目,方便在nginx.conf反向代理到项目(一般如果是前端项目就可代理到:/var/www/html/项目名/index.html)-v
/root/nginx:/root/nginx_conf是/root/nginx放置所有的配置文件,可以在nginx容器根目录下的/root/nginx_conf共享
进行docker ps 查看nginx容器是否启动,没有启动就先检查下步骤,还不可以可以给我留言。若已启动,则进行下一步
2、进入容器,进行配置文件复制,目录内连接
进入容器
docker exec -it nginx bash
移动文件,删除空文件,建立软连接
mv /etc/nginx/* /root/nginx_conf/
rmdir /etc/nginx
ln -s /root/nginx_conf /etc/nginx
执行后如下
root@78ad44e7e49d:/# mv /etc/nginx/* /root/nginx_conf/
root@78ad44e7e49d:/# rmdir /etc/nginx
root@78ad44e7e49d:/# ln -s /root/nginx_conf /etc/nginx
root@78ad44e7e49d:/# cd /etc/nginx
root@78ad44e7e49d:/etc/nginx# ls
conf.d fastcgi_params koi-utf koi-win mime.types modules nginx.conf scgi_params uwsgi_params win-utf
测试
可以通过exit
命令退出nginx容器,然后再进入我们的挂载目录查看宿主机目录,
exit
cd ~/nginx/conf/
ls
执行如下
root@0e8f3062e601:~# exit
exit
[root@huzy-aliyun conf.d]# cd ~/nginx/conf/
[root@huzy-aliyun conf]# ls
conf.d fastcgi_params koi-utf koi-win mime.types modules nginx.conf scgi_params uwsgi_params win-utf
若结果如上,即可进行进行nginx
测试,通过访问云服务器地址:xx.xx.xx.xx:80
4、修改配置,将创建的~/project/htmlDemo/test.html
文件部署到Nginx上
1、 到宿主机的nginx配置挂载目录,创建配置文件
mkdir ~/nginx/conf/conf.d
vim ~/nginx/conf/conf.d/htmlDemo.conf
2、将下列内容复制到创建的配置文件内
server{
#监听的端口号
listen 80;
#要监听的服务器地址,域名也可行,根据实际情况修改
server_name xx.xx.xx.xx;
client_max_body_size 20m;
access_log /var/log/nginx/host.access.log main;
#前端,根据实际情况修改
location / {
# 项目地址,这里指的是nginx容器的地址
root /var/www/html/htmlDemo;
try_files $uri $uri/ /index.html?s=$uri&$args;
index index.html index.htm index.php;
}
}
相关内容介绍:
- listen:要监听的端口号,这里我们的nginx容器是只开放了80端口。
- server_name : 服务器地址
- location / :配置默认访问的一些配置
- root 项目目录位置(容器内部路径)
- index :默认访问的资源 (我的这里例子中,文件名是test.html,这里配置test.html即可实现静态资源直接访问。)
5、将nginx
重新读取配置文件
方法一
docker restart nginx
优点:简单粗暴
缺点:若启动失败,无法查看日志
方法二
第一步,进入容器查看检验配置文件是否正确
docker exec -it nxinx bash
nginx -t
出现下列情况的就是配置配置文件检验通过。
[root@huzy-aliyun conf.d]# docker exec -it nginx bash
root@78ad44e7e49d:/# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
第二步
重新加载配置文件
nginx -s reload
6、配置完成,检验效果
若是直接访问服务器地址,会出现403错误,这是因为在配置文件中,我们指定的默认访问文件是/var/www/html/htmlDemo
的index文件 ,想要直接访问我们的文件的话,可以更改配置文件,在index
后边字段后加上 test.html亦或是将test.html文件更名为index.html。
至此,基于Docker
的Nginx
前端部署配置就完成了。
写在后边
关于nginx
Nginx 的几个特性,动静分离,负载均衡,和反向代理这里都没有怎么提及,只是简单的带着大家进行了一次实操,具体的其他特性上的讲解,我考虑在后续进行一篇简单的小总结,从实用性上进行讲解,更新后会在这边文章底部放上连接。
关于实际项目
现在目前国内主流的前端技术是vue
,拿vue来说,项目要放到nginx
中也只是把那个配置文件中的location /
中的root
的值更改为项目目录下的dist
项目打包文件目录。不过这里因为vue
是要运行在node环境下的,所以需要配置一个用于打包的前端环境容器(基于centos7
环境,下载有nvm
和git
实现一个可以切换node
版本的vue
前端打包环境,)
关于具体的实践和打包环境的Dockerfile文件我会放在另一篇文章上,有兴趣的可以到我博客里面查看一下。
关于后端部署
后端部署也会用到nginx
进行动静分离
和负载均衡
,我会在后边出几篇关于后端部署的博文,有兴趣的可以持续关注一下。
最后,觉得有用的话,可以点个小收藏,忘了回来翻一翻。实际实践过程中有什么问题留言私信都可以,我会尽最快速度回复。
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)