nginx+docker部署前端项目

1,866 阅读4分钟

相信nginx跟docker对很多开发来说都是很耳熟的,那这两个东西到底是干嘛的呢,是怎么用的呢?现在就由本sao年简单的讲下功能及使用方式吧。

nginx的作用

1. 反向代理

代理我们要访问的目标服务器。 代理服务器接受请求,然后将请求转发给内部网络的服务器(集群化),并将从服务器上得到的结果返回给客户端,nginx在反向代理上,提供灵活的功能,可以根据不同的正则采用不同的转发策略。

2. 负载均衡

多在高并发情况下需要使用,其原理就是利用反向代理的功能将数据流量分摊到多个服务器执行,减轻每台服务器的压力,多台服务器共同完成工作任务,从而提高了数据的吞吐量。同时也避免了服务器单节点故障,把请求按照一定的策略转发到不同的服务器上,达到负载的效果。

3. 动静分离

根据请求的规则策略区分静态资源(图片,字体,视频等)跟动态资源,然后把动态请求和静态请求分离开,合适的处理相应的请求,使整个服务器系统的性能、效率更高。根据不同配置对不同的请求做不同转发,并且可以利用这个特性对静态资源进行缓存,提高客户端访问速率。

(ps:当然nginx的作用不止这么些,其他的就不在这里做说明了)

dokcer的作用

Docker是一种轻量级的虚拟化技术,它可以将应用程序及其依赖项打包成一个独立的容器,容器中包含了应用程序所需的所有运行时环境、库文件、配置文件等。这样,无论在哪个环境中运行这个容器,都可以保证应用程序的稳定性和一致性。 Docker的作用是简化应用程序的部署和管理。传统的部署方式需要手动配置服务器环境、安装依赖项、部署应用程序等,非常繁琐且易出错。而使用Docker,只需要将容器部署到目标环境中即可,无需手动配置环境。此外,Docker还提供了一套完整的管理工具,可以方便地管理和监控容器的运行状态。 Docker还提供了更好的可移植性和可扩展性。由于容器中包含了所有运行时环境和依赖项,因此可以将应用程序和其依赖项打包成一个容器,然后在任何支持Docker的环境中进行部署。

接下来就上操作了(mac电脑为例子)

一、nginx

  1. 先安装nginx,体验下用nginx在本地启动一个简单的服务。window电脑直接nginx官网下载,mac电脑上使用homebrew下载。附上一篇知乎homebrew的教程
// 安装homebrew
/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

// 利用homebrew安装nginx (先执行homebrew更新,再安装)
brew update
brew install nginx

// 启动nginx,直接在命令行执行以下命令,执行后在浏览器访问 localhost:8080
nginx

// 关闭nginx的命令
nginx -s stop

// nginx重启,每次修改配置都需要重启
nginx -s reload
  1. nginx存放路径 /usr/local/etc/nginx 配置文件是里面的nginx.conf,可以在其中配置需要的规则。默认存放页面的地址是 /usr/local/var/www。

  2. 修改nginx配置项

http {
    include       mime.types;
    default_type  application/octet-stream;
    
    # root是指nginx读取文件的位置 location也可以配置,如果location有root优先读location的,没有就读外层配置的
    root   /usr/local/var/www/dist;
    
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       8080;
        server_name  localhost;
        location / {
            index  index.html index.htm;
			
			# 兜底配置,解决刷新页面404等问题 
            try_files $uri $uri/ /index.html;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    include servers/*;
}

好了nginx的简单操作玩会了就来玩docker吧。

二、docker

docker官网下载docker桌面端,下载后安装。打开docker桌面端左侧菜单栏有个Learnging Cener,可以按照教程简单的学习下容器创建跟使用。 在这里插入图片描述 配置国内镜像源 在上图的右上角有个 设置打开,修改Docker Engine里面的配置

"registry-mirrors": [
    "https://hub-mirror.c.163.com",  // 网易
    "https://registry.aliyuncs.com", // 阿里云
    "https://registry.docker-cn.com", // 国内docker源
    "https://docker.mirrors.ustc.edu.cn" //  中科院
  ]

部署项目

  1. 在需要部署的项目根目录,新建一个Dockerfile文件。以下是一个简单的dockerfile文件代码。
# 使用基础的Node.js镜像
FROM node:18.16.0 as builder

# 设置工作目录
WORKDIR /app

# 复制项目文件到工作目录
COPY . .

# 安装项目依赖
RUN npm config set registry https://registry.npmmirror.com
RUN npm install

# 打包
RUN npm run build

# 拉取nginx镜像
FROM nginx:1.21.1-alpine AS production

# 把打包好的文件移到 docker拉取的nginx镜像默认读取路径里(/usr/share/nginx/html)
COPY --from=builder /app/dist /usr/share/nginx/html
  1. 在项目所在的路径启动一个终端,敲下以下命令(注意:镜像名字后面要加 空格 跟 .)
docker build -t 镜像名字 .
  1. 运行完上面镜像打包命令后可以在docker桌面管理工具看到打包好的镜像。然后点击三角形的运行,并且修改点击后弹出的Optional settings,修改好容器名,端口号,访问地址就可以run啦。 在这里插入图片描述 在这里插入图片描述
  2. 在镜像run之后可以在Containers看到容器,点击port那一列就可以运行部署的项目了 在这里插入图片描述
  3. 在上图的Containers中可以点击“Name”那一列,点击之后可以看到该容器的一些日志,文件目录等。

docker里文件路径 1、nginx存放的路径: /etc/nginx 2、nginx默认读取html的路径:/usr/share/nginx/html

在这里插入图片描述

结束!!!