docker nginx部署前端项目

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

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

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

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

废话少说

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

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

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

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

上面的解释一下：

docker run -d 表示后台运行

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

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

--name nginx2 表示容器的名称

最后的一个nginx 表示镜像

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

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

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

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

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

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

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

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

发现就可以了

上面我们介绍的是如何启动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

再次访问:

此时此刻我们的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监听的端口，然后重启容器发现无法访问页面了

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

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

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

我们来看这个命令

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

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

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

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

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

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

先放一个index.html文件吧

其实里面就是一个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

上面就是部署的整个过程

希望对你有所帮助

docker nginx部署前端项目相关推荐

win10 nginx部署前端项目（静态资源服务器和HTML）
win10 nginx部署前端项目(静态资源服务器和HTML) niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details ...
nginx 部署前端项目，不缓存html文件，项目发版后，不用手动刷新页面
nginx 部署前端项目,不缓存html文件,项目发版后,不用手动刷新页面 location / {expires 1h;root /home/test/vue/dist/;index index.h ...
Gitlab CI/CD教程以及实战docker自动部署前端项目（全）
目录前言 1. 技术知识 1.1 docker安装gitlab 1.2 docker安装gitlab-runner 1.3 .gitlab-ci.yml编写 1.4 使用docker部署前端项目 1 ...
简单Tomcat和Nginx部署前端项目
前言记录一下前端项目的部署,主要最近也在做这些事情. 一.tomcat部署前端这里我使用的事linux环境,windows下类似. 1.下载tomcat tomcat下载官网版本很多,下载常用的 ...
Docker利用Nginx部署前端项目
今天给大家分享的是Docker利用Nginx部署Vue等前端页面项目:其实是我工作刚好用到,顺便分享给大家O(∩_∩)O,那么话不多说直接开始. 一:准备文件我们先将前端项目打包好,放到此文件夹下, ...
使用nginx部署前端项目
目录安装Nginx 1.下载docker的nginx镜像 2.查看下载完成的镜像 3.运行一个nginx的镜像的实例 4.进入nginx容器 5.在物理机创建对应文件夹 6.拷贝容器中的对应的文件夹 ...
Docker + Nginx 部署Vue项目
1.vue项目打包打包生成dist文件夹 npm run build 如果将该dist目录整个传到服务器上,部署成静态资源站点就能直接访问到该项目. assetsPublicPath: '/' 记得 ...
使用Docker Nginx部署vue项目
Vue3 项目打包打包 Vue 项目在根目录使用以下命令: npm run build 执行以上命令,输出结果如下: 执行完成后,会在 Vue 项目下会生成一个 dist 目录,该目录一般包含 in ...
nginx部署前端项目的详细步骤
前言在前端开发过程中经常是需要把前端静态资源放到服务器中看效果,这时经常用到nginx来配置. 1. 什么是nginx Nginx是一款高性能的http 服务器/反向代理服务器及电子邮件(IMAP/ ...

docker nginx部署前端项目

docker nginx部署前端项目相关推荐

最新文章

热门文章