前端必会，教你从 0 开始使用 docker + nginx 部署项目，太赞了

极客枫哥
3,977 阅读4分钟

本文首发于公众号 极客枫哥 ，日更分享各种好玩的软件、编程知识和个人成长故事

今天给大家介绍一下 nginx 的一些日常使用，作为前端开发，我们部署项目一般都是直接使用现成的 CI/CD 工具，比如 gitlab runner、jenkins 等，那么为了更好的熟悉整个流程，所以还是很有必要来学习一下 nginx。 首先来介绍一下 nginx 是什么？ nginx 是一款高性能的 http 和反向代理服务器，高效、轻量并且配置灵活，一般应用于网站结构中。 下面我们将从安装，常见配置和应用场景几个方面来介绍一下。

安装

这里为了方便，我直接使用 docker 来安装，直接执行下面的命令先拉取 nginx 镜像

image.png

由于某些原因，目前 docker 镜像地址好像没法用了。也没关系，我们来配置一下镜像加速器。 我使用的是 orbstack 这款轻量级的 macOS docker 应用程序，这个可以以后再单独写一篇文章来介绍。 我们打开软件的 settings，然后在 docker 配置中加入一下 registry-mirros配置

image.png

最后一个打码的是我使用的 aliyun 加速器，貌似最近也没法用了。 配置完成后，我们再来尝试拉取一下 nginx 镜像

image.png

这样镜像就拉取好了。 我们直接可以执行下面的命令启动一个 nginx 容器

docker run --name nginx-test -p 8080:80 -d nginx

然后我们使用浏览器访问一下 localhost:8080地址，不出意外，就能看到 nginx 的欢迎页面了

image.png

常见配置

这里我们直接使用 vite 来快速创建一个 react 项目，来当做日常开发的前端项目。执行 npm create vite，然后按照提示选择模块就可以了。

image.png

接着进入到 vite-project 目录中，安装好依赖，然后执行 npm run dev就能看到项目运行页面了

image.png

nginx 的配置文件一般在 /etc/nginx/nginx.conf中，我们执行 docker 的命令进入 nginx 容器中

docker exec -it nginx-test bash

然后 cd 到 /etc/nginx 目录下，使用 vim 来查看一下 nginx.conf 文件，发现报错了。 提示找不到 vim 命令，这是因为容器中默认是不会安装 vim 的。

image.png

我们使用 apt-get 来安装一下 vim，首先要执行 apt-get update命令来更新一下软件包列表。然后执行 apt-get install vim，这样 vim 就安装好了，再来尝试查看一下 nginx.conf 配置文件中的内容。

image.png

我们接下来的目标就是把 vite-project 的项目打包好，然后利用 nginx 发布出来。我们现进入到 vite-project 项目中执行打包命令。

image.png

然后将 dist 目录打成一个 zip 包

zip -q -r dist.zip dist

接着把 dist.zip 拷贝到 nginx-test 容器中的 home 目录下

docker cp dist.zip nginx-test:/home/

进入容器中，将 dist.zip 解压，可以使用 unzip 命令，如果找不到命令，使用 apt-get 进行安装即可，不多赘述。 然后进入 /etc/nginx/conf.d目录下，复制 defaul.conf 为 web.conf，我们想通过 localhost:8080/web地址能访问到 vite-project，现在增加如下配置

image.png

我们试着访问一下 localhost:8080/web地址，不出意外的话，就能成功访问到项目页面了。

image.png

应用场景

跨域配置，前端开发中常遇到跨域问题，nginx 可以方便地配置 CORS 头来解决跨域问题：

server {
    location /api {
        proxy_pass http://backend_server;
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'Origin, Content-Type, Accept';
    }
}

nginx 也常用于为前端应用配置 HTTPS，从而提高安全性：

server {
    listen 443 ssl;
    server_name example.com;
​
    ssl_certificate /etc/nginx/ssl/example.com.crt;
    ssl_certificate_key /etc/nginx/ssl/example.com.key;
​
    location / {
        proxy_pass http://backend_server;
    }
}

nginx 的缓存功能可以显著提高响应速度。通过配置 proxy_cache 可以缓存后端服务器的响应：

proxy_cache_path /data/nginx/cache levels=1:2 keys_zone=my_cache:10m max_size=1g inactive=60m use_temp_path=off;
​
server {
    location / {
        proxy_cache my_cache;
        proxy_pass http://backend;
        add_header X-Cache-Status $upstream_cache_status;
    }
}

总结

nginx 作为一款高性能的服务器，在前端开发中扮演着重要角色。通过掌握 Nginx 的基本配置和常见应用场景，前端开发者不仅可以提升网站的性能和安全性，还能在开发流程中更加得心应手。希望本文对前端开发者在使用 nginx 时有所帮助。

avatar
文章
阅读
粉丝