【Nginx】Docker安装配置Nginx实现前端项目部署_卷、就硬卷的博客-程序员ITS203

技术标签: nginx  服务器  vue.js  服务器部署  docker  

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

直接结果

[[email protected] ~]# 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/htmlDemoroot目录下创建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、准备挂载目录

  在宿主机创建好用于挂载的相关文件夹

  1. logs :日志文件目录
  2. conf :配置文件目录
  3. project :项目文件目录(前面的步骤中已经创建了,并且其中有htmlDomo/test.html文件)

通过mkdir ~/nginx/confmkdir ~/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:80nginx容器开放全部端口监听。)
  • -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

执行后如下

[email protected]:/# mv /etc/nginx/* /root/nginx_conf/
[email protected]:/# rmdir /etc/nginx 
[email protected]:/# ln -s /root/nginx_conf /etc/nginx
[email protected]:/# cd /etc/nginx
[email protected]:/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

执行如下

[email protected]:~# exit
exit
[[email protected] conf.d]# cd ~/nginx/conf/
[[email protected] 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

出现下列情况的就是配置配置文件检验通过。

[[email protected] conf.d]# docker exec -it nginx bash
[email protected]:/# 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
在这里插入图片描述

至此,基于DockerNginx前端部署配置就完成了。


写在后边

关于nginx

  Nginx 的几个特性,动静分离负载均衡,和反向代理这里都没有怎么提及,只是简单的带着大家进行了一次实操,具体的其他特性上的讲解,我考虑在后续进行一篇简单的小总结,从实用性上进行讲解,更新后会在这边文章底部放上连接。

关于实际项目

  现在目前国内主流的前端技术是vue,拿vue来说,项目要放到nginx中也只是把那个配置文件中的location /中的root的值更改为项目目录下的dist项目打包文件目录。不过这里因为vue是要运行在node环境下的,所以需要配置一个用于打包的前端环境容器(基于centos7环境,下载有nvmgit实现一个可以切换node版本的vue前端打包环境,)
  关于具体的实践和打包环境的Dockerfile文件我会放在另一篇文章上,有兴趣的可以到我博客里面查看一下。

关于后端部署

  后端部署也会用到nginx进行动静分离负载均衡,我会在后边出几篇关于后端部署的博文,有兴趣的可以持续关注一下。

最后,觉得有用的话,可以点个小收藏,忘了回来翻一翻。实际实践过程中有什么问题留言私信都可以,我会尽最快速度回复。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_43781399/article/details/112950115

智能推荐

lisp语言1y1c,AutoLISP语言的基本函数.ppt_新德里的雨的博客-程序员ITS203

AutoLISP语言的基本函数.ppt10.4.1 数值函数 数值函数用于处理整型数和实型数,数值函数包括:基本算术函数、三角函数、位操作布尔函数。数值函数的返回值类型取决于参数表中参数的数据类型。 数的运算规则: 整整得整; 实实得实; 整实得实。 例:command: (/ 18 4 2) 返回: 2 command: (* 4.5 2.0) 返回:9....

hook pte_菜鸟开始学习SSDT HOOK((附带源码)_迈皋桥老实人的博客-程序员ITS203

看了梦无极的ssdt_hook教程,虽然大牛讲得很细,但是很多细节还是要自己去体会,才会更加深入。在这里我总结一下我的分析过程,若有不对的地方,希望大家指出来。首先我们应该认识 ssdt是什么?从梦无极的讲解过程中,我联想到了这样一个场景:古时候有一户人家,姓李,住在皇宫外面,他们家有一个女儿进皇宫当宫女。有一天,李家的老大爷要送东西给他女儿,我们假定他可以进皇宫,于是就开始了这样一个过程。进皇宫...

exports 和 module.exports 的区别_周大侠啊的博客-程序员ITS203_exports

首先我们需要知道的是,node 真正导出的对象是 module.exports那exports 又是怎么回事呢?其实,在一开始,exports 和 module.exports 引用的都是同一个 空对象。也就是说,给这两个对象添加属性时,导出的是没有区别的,因为引用的是同一个对象。看下面test1.jsfunction a(){ console.log('i am a'...

教你如何快速排查死锁,如何避免死锁!__Ricky_的博客-程序员ITS203_如何避免线程死锁

文章目录前言实例通过jdk工具jps、jstack排查死锁问题步骤一:使用jsp查找程序进行通过jdk提供的工具jconsole排查死锁问题通过jdk提供的工具VisualVM排查死锁问题如何避免死锁?1. 正确的顺序获得锁2. 超时放弃总结前言相信程序员都会碰上这样的问题,Java死锁如何排查?又如何解决呢?那么,何为死锁呢?死锁是指两个或两个以上的进程在执行过程中,由于竞争资源或者由于彼此...

MVC中使用WebMail 发送注册验证信息_dgnwy6921的博客-程序员ITS203

在MVC中发送Email 可以使用WebMail ;使用起来十分简单。如下: WebMail.SmtpServer = ConfigurationHelper.GetValue("SmtpServer");//获取或设置要用于发送电子邮件的 SMTP 中继邮件服务器的名称。 WebMail.SmtpPort = Int32.Parse(Configura...

rabbitmq问题之HTTP access denied: user 'guest' - User can only log in via localhost_Erica_1230的博客-程序员ITS203_http access denied: user 'guest' - user can only l

问题:昨天安装rabbitmq(3.3.4版本)服务,并启用rabbitmq_management插件去管理rabbitmq服务,但是在访问管理界面使用guest用户登录时出现login failed错误。到服务器上查询日志显示出现错误的原因是:HTTP access denied: user 'guest' - User can only log in via localhost。解...

随便推点

黑马程序员------TCP协议-客户端&服务端建立通信_dantou7190的博客-程序员ITS203

------Java培训、Android培训、iOS培训、.Net培训、期待与您交流! -------客户端(Client)首先与服务端(Server)建立连接,形成通道(其实就是IO流),然后,数据就可以在通道之间进行传输,并且单个Server端可以同时与多个Client端建立连接。Socket和ServerSocket,建立客户端和服务器端. 建立连接后,通过Socket中

python dlib ubuntu 人脸识别2 使用mmod_human_face_detector进行人脸检测__iorilan的博客-程序员ITS203_mmod_human_face_detector.dat

mmod_human_face_detector.dat是训练好的模型,可以从这里下载:http://dlib.net/files/mmod_human_face_detector.dat.bz2输入参数:1. 模型dat文件2.要检测的人脸图片import sysimport dlibif len(sys.argv) &amp;lt; 3: print( ...

java中的简单的字符串大小比较方法——compareto方法的详细介绍_张小洛的博客-程序员ITS203

原文链接:在java编程中,我们会偶尔遇到字符串大小比较的问题,compareTo()方法很简单就实现这种功能。该方法用于判断一个字符串是大于、等于还是小于另一个字符串。判断字符串大小的依据是根据它们在字典中的顺序决定的。    语法:Str1.compareTo(Str2);    其返回的是一个int类型值。若Str1等于参数字符串Str2字符串,则返回0;若该Str1按字典顺序小于参数字符串...

注册/登录 实现过程详解_Beyonderwei的博客-程序员ITS203_注册登录具体实现

文章目录一、前言二、实现过程图解注册:登录:一、前言    一般的平台基本上都有用户管理这一部分,虽然我们都是各个平台的用户,对于一般的流程有所了解,看似简单,但是真正实现的过程中确遇到了很多的困难。二、实现过程图解注册:看似过程似乎很简单但是这过程还有很多需要考虑的因素,采取邮箱发送验证码的方式实现验证:验证码如何产生:    通常我们的验证码是0-9中的六个或者四个数字,因此...

Swust oj 980输出利用先序遍历创建的二叉树的层次遍历序列_Loftiness的博客-程序员ITS203_swustoj#980

输出利用先序遍历创建的二叉树的层次遍历序列利用先序递归遍历算法创建二叉树并输出该二叉树的层次遍历序列。先序递归遍历建立二叉树的方法为:按照先序递归遍历的思想将对二叉树结点的抽象访问具体化为根据接收的数据决定是否产生该结点从而实现创建该二叉树的二叉链表存储结构。约定二叉树结点数据为单个大写英文字符。当接收的数据是字符"#“时表示该结点不需要创建,否则创建该结点。最后再输出创建完成的二叉树的层次遍历...

NR随机接入(三)_鹿鹿粑粑的博客-程序员ITS203

CBRA(Contention Based Random Access)信令过程包含四条消息:MSG1、MSG2、MSG3和MSG4,CFRA(Contention Free Random Access)的信令过程包含两条消息:MSG1和MSG2。除了选择Preamble(Dedicated Preamble)不同以外,CFRA的MSG1和MSG2跟CBRA基本相同。因而,这里依然重点介绍CBRA。如果一切顺利的话,UE发送MSG1后会收到MSG2,发送MSG3后会收到MSG4,并且MSG2和MSG4携带