Docker 安装 Nginx 部署前端项目

简介: Docker 安装 Nginx 部署前端项目


本文算是我编写 Docker + Jenkins 自动化部署专栏的开篇文吧

虽然看起来和Jenkins没啥关系~,但是后续还是会用到Nginx部署前端项目的。

很久没有尝试连续写一整个系列了,希望此专栏能帮助到一些小伙伴们 😃

一、关于 Nginx 服务器

其实说到web服务器,著名的有 Apache 、Apache下的顶级项目 Tomcat、微软的 IIS、以及我们今天学的的Nginx。

不同服务器的侧重点是不同的,像Tomcat就是一个开放源代码、运行servlet和JSP Web应用软件的基于Java的Web应用软件容器。而Nginx是一款轻量级的Web 服务器/反向代理反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行。其特点是占有内存少,并发能力强,事实上nginx的并发能力在同类型的网页服务器中表现较好。

他的介绍也代表了他的应用性广,总结起来,Nginx 的应用场景或者能够实现的功能大致如以下几点:

  1. 正向代理
  2. 反向代理
  3. 负载均衡
  4. 动静分离
  5. 静态资源web服务器

而我们今天主要利用到的就是 第五点将 Nginx 作为一个静态资源 Web服务器。

二、Docker 安装 Nginx

搜索镜像命令,会列出所有的可下载的镜像

docker search nginx

1704465383556.jpg

拉取镜像

docker pull nginx # 不加版本号 默认拉取最新版
 docker pull nginx:[tag] # : 号 后面就可以加版本号 如 nginx:1.16.1 这种,但需要确定它是存在过的版本号才可以。

学习的话,一般直接上手最新,不行了再降。

1704465401407.jpg


注意:这里有一个需要注意的点,Nginx 一般是根据配置文件启动的。

如果我们在第一次启动的时候就挂载目录,那么因为我们宿主机是空文件,会直接导致 Nginx 容器内的配置文件被覆盖,致使启动失败。

所以的步骤如下:

1、宿主机创建好要挂载的目录

mkdir -p /home/nginx/
 mkdir -p /home/nginx/logs  
 mkdir -p /home/nginx/html

-p 参数的作用就是允许创建多级目录

2、启动一个不挂载的容器

docker run -d --name nzc-nginx  -p 80:80 nginx

1704465408906.jpg

为了让大家更进一步理解 Nginx 目录结构,我们用命令进入 Nginx 容器

docker exec -it nzc-nginx bash

-it 以交互式进入容器 ,bash保留为容器终端的输入形式,所以结合起来就是进入容器终端并且的保留为容器终端的输入形式(-it和bash的结合作用)

1704465415313.jpg

/etc/nginx/nginx.conf是nginx的主配置文件,具体内容留在后一章节再说吧。

/etc/nginx/conf.d下的default.conf 就是默认 server 配置

3、从容器中把配置文件复制出来

退出容器的终端,直接在终端里输入 exit 即可。

docker cp nzc-nginx:/etc/nginx/nginx.conf /home/nginx/nginx.conf
 docker cp nzc-nginx:/etc/nginx/conf.d /home/nginx/
 docker cp nzc-nginx:/usr/share/nginx/html /home/nginx/ #此处就是网站站点目录

1704465430518.jpg

4、暂停、删除容器

查看所有正在运行的容器

docker ps
 docker ps -a #查看所有容器

1704465437586.jpg

暂停、删除容器

docker stop nzc-nginx # nzc-nginx 容器| 容器ID 也可以,只需要前3位数字即可
 docker rm nzc-nginx
 docker rm -f nzc-nginx #直接删除正在运行的容器

1704465444231.jpg

5、重新启动一个挂载目录的容器

docker run \
 -p 80:80 \
 --name nzc-nginx \
 -v /home/nginx/nginx.conf:/etc/nginx/nginx.conf \
 -v /home/nginx/conf.d:/etc/nginx/conf.d \
 -v /home/nginx/logs:/var/log/nginx \
 -v /home/nginx/html:/usr/share/nginx/html \
 -d nginx:latest

1704465450627.jpg

测试:可以成功访问就是成功启动啦。

1704465459288.jpg

如果需要每次都自启动的话,可以加上 ``

三、Nginx 配置文件讲解

本小章节只是针对与项目有关联配置文件进行一番简单的讲解,更详细的可能就需要大家去找找其他创作者所写的文章啦。望大家见谅

我们先看看之前上文提了一嘴的主配置文件:

nginx.conf

user  nginx;
 worker_processes  auto;
 #  error_log 输出目录
 error_log  /var/log/nginx/error.log notice;
 pid        /var/run/nginx.pid;
 events {
   # 单个工作进程可以允许同时建立外部连接的数量
     worker_connections  1024;
 }
 http {
     include       /etc/nginx/mime.types;
     default_type  application/octet-stream;
     log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                       '$status $body_bytes_sent "$http_referer" '
                       '"$http_user_agent" "$http_x_forwarded_for"';
     access_log  /var/log/nginx/access.log  main;
     sendfile        on;
     #tcp_nopush     on; 
     keepalive_timeout  65;  #连接存活时间
     #gzip  on;  支持传递压缩文件
     #  nginx 配置文件中支持 include ,即支持多配置文件组合
     include /etc/nginx/conf.d/*.conf;
 }

你可别小瞧这个文件,里面有不少设置的开关勒,不过这次不是写这里~~

继续来到 default.conf

server {
     # 这里就是表示监听的端口
     listen       80;
     listen  [::]:80;
     # 这里表示服务地址 写域名或者ip
     server_name  localhost;
     #access_log  /var/log/nginx/host.access.log  main;
     # 这里就是我们今天要接触的东西了 
     # / 表示的是 ip:port后面跟着的路径 / 就是 ip:port/
     # 如果是 /nzc 访问的时候就是  ip:port/nzc/
     #基于这个逻辑,我们就可以运行多个站点
     # 这里还可以写表达式、正则表达式等 
     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
     #
     #location ~ .php$ {
     #    root           html;
     #    fastcgi_pass   127.0.0.1:9000;
     #    fastcgi_index  index.php;
     #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
     #    include        fastcgi_params;
     #}
     # deny access to .htaccess files, if Apache's document root
     # concurs with nginx's one
     #
     # 黑名单白名单功能
     #location ~ /.ht {
     #    deny  all;
     #}
 }

我们在 default.conf 中加上一个 location ,等会部署我们的项目

server {
     location  /nzc {
         # alias 后面跟着的是容器内部的目录,但是我们是挂载出来的,实际上我们放在宿主机相应的挂载目录下即可
         alias   /usr/share/nginx/html/www/blog/dist;
         # 这里的crush是我项目前缀
         index  index.html index.htm;
         try_files $uri $uri/  /nzc/index.html;
      }
 }

关于这里的牵扯到的 alias

也可以看看 alias 与 root 区别

四、部署前端项目

对了修改完 nginx配置文件,记得重启一下,不然不生效。

docker restart nzc-nginx

我这里前端是 Vue 项目,打包相信大家都会打包吧~

没有vue项目,其实扔个 html 页面上去测试也可以的,莫慌。

可能会出现的错误

打包的时候可能会出现静态资源访问不到的错误。

把 vue.config.js文件中的 publicPath 改成 ./

1704465472810.jpg

大家记得创建一下目录,别忘啦。 1704465475048.jpg

其实上传到指定目录后,就可以直接访问啦,不然看我。

测试:

1704465477243.jpg

或者直接 curl 测试也可

1704465479894.jpg

今天第一天结束啦~~

五、总结

相信大家对于 Docker 怎么玩、Nginx 是什么样子大致应该是有所了解了吧,希望大家有所收获,我们一起加油!

Nginx 可以做的事情有很多,很好玩的,感兴趣的可以多试试,也可以试着自己记录记录!!

明天继续~~

目录
相关文章
|
26天前
|
前端开发 JavaScript 应用服务中间件
在Docker部署的前端应用中使用动态环境变量
以上步骤展示了如何在 Docker 配置过程中处理并注入环墨遁形成可执行操作流程,并确保最终用户能够无缝地与之交互而无须关心背后复杂性。
85 13
|
5月前
|
Ubuntu 网络协议 应用服务中间件
在 Ubuntu 上安装 Nginx
在 Ubuntu 上安装和配置 Nginx 非常简单。首先更新系统包,然后通过 `apt` 安装 Nginx,检查服务状态并配置防火墙规则。访问服务器 IP 测试是否成功显示默认页面。还可管理服务、创建虚拟主机及排查常见问题,适合新手快速上手部署高性能 Web 服务。
600 0
|
8月前
|
应用服务中间件 PHP nginx
今日小结通过aliyun的本地容器镜像部署我的nginx和php环境
简介: 本教程介绍如何基于 Dragonwell 的 Ubuntu 镜像创建一个运行 Nginx 的 Docker 容器。首先从阿里云容器镜像服务拉取基础镜像,然后编写 Dockerfile 确保 Nginx 作为主进程运行,并暴露 80 端口。最后,在包含 Dockerfile 的目录下构建自定义镜像并启动容器,确保 Nginx 在前台运行,避免容器启动后立即退出。通过 `docker build` 和 `docker run` 命令完成整个流程。
291 25
今日小结通过aliyun的本地容器镜像部署我的nginx和php环境
|
4月前
|
安全 应用服务中间件 Linux
Debian操作系统如何安装Nginx并开启HTTP2
本指南介绍了在Linux系统中通过源码编译安装Nginx的完整流程。首先更新软件包列表并安装必要的编译依赖,接着下载指定版本的Nginx源码包(如1.24.0),检查文件完整性后解压。随后通过配置脚本指定安装路径与模块(如HTTP SSL模块),执行编译和安装命令。最后创建软链接以便全局调用,并提供启动、停止及重载Nginx的命令,同时提醒注意安全组设置以确保正常访问。
|
7月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
313 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
5月前
|
应用服务中间件 Linux 网络安全
技术指南:如何把docsify项目部署到基于CentOS系统的Nginx中。
总结 与其他部署方法相比,将docsify项目部署到基于CentOS系统的Nginx中比较简单。以上步骤应当帮助你在不花费太多时间的情况下,将你的项目顺利部署到Nginx中。迈出第一步,开始部署你的docsify项目吧!
210 14
|
7月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
5915 24
|
8月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
472 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
8月前
|
安全 前端开发 开发工具
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
367 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
|
8月前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
351 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡