【Nginx】Docker安装配置Nginx实现前端项目部署
Nginx
流程目录
- Nginx
-
- Nginx是什么，能做什么
- 基于Docker的Nginx安装和配置
-
- 1、拉取nginx镜像
- 2、根据镜像创建Nginx容器
-
- 1、创建一个用于展示的HTML
- 2、创建Nginx容器
-
- 1、准备挂载目录
- 2、进行容器创建并挂载
- **写在后边**
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 nginxtitle>
head>
<body>
<h1>Hello Niginxh1>
<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进行动静分离和负载均衡，我会在后边出几篇关于后端部署的博文，有兴趣的可以持续关注一下。
最后，觉得有用的话，可以点个小收藏，忘了回来翻一翻。实际实践过程中有什么问题留言私信都可以，我会尽最快速度回复。