docker nginx部署前端项目

清疚 2023-02-14 01:41 27阅读 0赞

最近一直在搞前后端分类，一直在想前端的html页面应该用什么部署

想来想去，如果用tomcat好像有点浪费资源，作为程序员自然要时时刻刻追求新的东西

一直以来都是在apache tomcat上面运行，今天来尝试一下nginx

至于两个性能和效果如何，大家可以参看：[https://blog.csdn.net/wscdylzjy/article/details/45503629][https_blog.csdn.net_wscdylzjy_article_details_45503629]

废话少说

我们来利用docker来部署nginx项目

首先我们假设docker 安装成功，并且也获取了nginx镜像，如果还没有安装可以安装一下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70][]

从镜像上面我们可以看到的是nginx和tomcat大小比较区别还是很大的，对于我们这种在阿里云上购买一个小的服务器，运行着开发的人员来说，内存小还想追求高的性能，可以考虑使用nginx

第一步启动nginx :docker run -d -p 80:80 --name nginx2 nginx

![20200530155053476.png][]

上面的解释一下：

docker run -d 表示后台运行

\-p 80:80  第一个80是宿主机的端口，第二个是容器的端口

\-p（小写）则可以指定要映射的IP和端口，但是在一个指定端口上只可以绑定一个容器。支持的格式有 `hostPort:containerPort`、`ip:hostPort:containerPort`、 `ip::containerPort`。

\--name nginx2 表示容器的名称

最后的一个nginx 表示镜像

我们先把这个容器删了，换一个容器端口

我们映射容器为nginx端口为:3766

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1][]

这个时候去访问页面是打不开的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2][]

其实这个就是说，我们docker在启动nginx容器的时候，需要默认用容器的80端口这样才能进行访问

真的是这样的，我们能不能修改nginx默认的80端口

docker cp nginx2:/etc/nginx/conf.d/default.conf default.conf

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 3][]docker cp default.conf nginx2:/etc/nginx/conf.d/default.conf  
docker restart nginx2

![20200530161029437.png][]

修改了配置文件之后我们要做重新访问页面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 4][]

发现就可以了

上面我们介绍的是如何启动ngxin和如何修改nginx的默认的的端口

我们可以看到的是我们每次修改nginx的配置文件需要复制出来，修改，然后复制回去

这样来说甚是麻烦

我们可以通过挂载的方式来解决来回cp的问题

我们把前面创建的nginx2的default.conf放到一个文件夹里面

比如:我们把default.conf 存放在/home/nginx/default.conf

然后我们启动：

docker run -d -p 80:3766 -v /home/nginx/default.conf:/etc/nginx/conf.d/default.conf --name nginx2 nginx

![20200530180548980.png][]

再次访问:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 5][]

此时此刻我们的default.conf配置文是放在容器外部的

server {
        listen       3766;
        server_name  localhost;
    
        #charset koi8-r;
        #access_log  /var/log/nginx/host.access.log  main;
    
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }
    
        #error_page  404              /404.html;
    
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
    
        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}
    
        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #

如果我们修改上面的 nginx监听的端口，然后重启容器发现无法访问页面了

这个时候说明的是我们的配置文件生效了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 6][]

我修改成为:3767 容器中这个端口是没有开放的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 7][]

看来我们的配置文件是有效果的

我们来看这个命令

docker run -d -p 80:3766 -v /home/nginx/default.conf:/etc/nginx/conf.d/default.conf --name nginx2 nginx

\-v 创建一个挂载，前端是宿主机的路径 后面的 是容器中的路径

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 8][]

我们发现nginx里面有一个location / 这个是静态文件的路径

我们想，如果我们将我们的静态文件夹存放在宿主机上，然后做一个挂载放在容器里这个路径，那么我们是不是修改宿主机上面的 静态文件，对应的容器的静态文件也会进行修改

这个就是实现了我们前端页面用nginx显示的需求吗

![20200530181659248.png][]

我在home目录下创建一个wwww文件来存放我的静态文件

先放一个index.html文件吧

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 9][]

其实里面就是一个hello world

下面我们要启动nginx

docker run -d -p 80:3766 -v /home/nginx/default.conf:/etc/nginx/conf.d/default.conf -v /home/www:/usr/share/nginx/html --name nginx2 nginx

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 10][]

上面就是部署的整个过程

希望对你有所帮助

[https_blog.csdn.net_wscdylzjy_article_details_45503629]: https://blog.csdn.net/wscdylzjy/article/details/45503629
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200530154906525.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[20200530155053476.png]: https://img-blog.csdnimg.cn/20200530155053476.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200530160318725.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200530160439833.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200530160849783.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[20200530161029437.png]: https://img-blog.csdnimg.cn/20200530161029437.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200530161157431.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[20200530180548980.png]: https://img-blog.csdnimg.cn/20200530180548980.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200530180609316.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200530180931145.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/2020053018104090.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200530181236315.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[20200530181659248.png]: https://img-blog.csdnimg.cn/20200530181659248.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200530182441934.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200530182424566.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70