使用 npm run build 并部署到本地 Nginx 服务器

开心就多写，一点就开心

于 2024-07-17 15:44:06 发布

阅读量695

点赞数 4

分类专栏：后端文章标签： npm nginx 服务器

本文链接：https://blog.csdn.net/weixin_62428445/article/details/140497208

版权

后端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

项目终于可以部署测试了，冲冲冲！

引言

在现代 Web 开发中，构建和部署静态网站或前端应用是一个常见的流程。对于使用诸如 React、Vue 或 Angular 这样的框架开发的应用程序，我们通常会使用 npm 脚本中的 npm run build 命令来生成生产就绪的代码。接下来，这些静态文件需要被部署到一个服务器上，以便用户可以通过互联网访问它们。在这篇博文中，我们将介绍如何使用 Nginx 作为本地服务器来部署通过 npm run build 构建的项目。

步骤一：构建你的项目

首先，确保你已经在项目根目录下安装了所有必要的依赖。然后，运行以下命令来构建你的项目：

npm run build

这将触发构建过程，根据你的配置，可能会执行以下操作：

将源代码转换为浏览器可以理解的格式（例如，ES6+ 转换为 ES5）。
压缩和优化 CSS 和 JavaScript 文件。
复制静态资源，如图片和字体。
生成一个 index.html 文件，以及所有其他相关文件。

构建完成后，你将在项目目录中看到一个新的 dist 或 build 目录，其中包含了用于生产环境的静态文件。

步骤二：安装和配置 Nginx

如果你还没有安装 Nginx，可以在大多数 Linux 发行版中使用包管理器进行安装。例如，在 Ubuntu 上，你可以使用以下命令：

sudo apt-get update
sudo apt-get install nginx

一旦安装完成，你需要配置 Nginx 以指向你的构建目录。打开 Nginx 的配置文件，通常位于 /etc/nginx/sites-available/default 或 /etc/nginx/nginx.conf，并添加或修改以下内容：

server {
    listen 80;
    server_name localhost;

    root /path/to/your/build/directory;
    index index.html index.htm;

    location / {
        try_files $uri $uri/ =404;
    }
}

这里的 /path/to/your/build/directory 应该替换为你之前通过 npm run build 命令生成的静态文件所在的实际路径。