手把手搭建nginx服务器，部署前端代码

什么是 Nginx？

Nginx 是一个开源的高性能 Web 服务器，它能够处理并发连接、负载均衡、反向代理等任务。它还可以作为一个静态文件服务器，处理静态文件的请求。使用 Nginx 可以帮助我们更好地管理和优化我们的 Web 应用。

步骤

安装 Nginx

首先，我们需要在服务器上安装 Nginx。这可以通过在终端中运行以下命令来完成：

sudo apt-get update
sudo apt-get install nginx

这将安装最新版本的 Nginx。

配置 Nginx

在安装 Nginx 之后，需要进行一些基本配置。Nginx 的配置文件位于 /etc/nginx/nginx.conf 中，您可以使用以下命令编辑它：

sudo nano /etc/nginx/nginx.conf

然后可以进行一些常见的配置，例如修改端口号、更改默认网站的根目录等。以下是一个示例配置：

http {
    server {
        listen 80;
        server_name example.com;

        root /var/www/example.com;

        index index.html;

        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

此示例配置假定您要使用 Nginx 作为静态文件服务器。您需要将 server_name 和 root 替换为您自己的域名和目录。如果您要将 Nginx 用作反向代理，则需要进行更多的配置。

部署前端代码

部署前端代码的方法与您的前端框架和工具有关。在此示例中，我们将使用 Vue.js 作为示例。

首先，您需要构建 Vue.js 应用程序。您可以通过运行以下命令来完成：

npm run build

这将构建您的应用程序并将静态文件存储在 dist 目录中。

然后，您可以将 dist 目录中的文件复制到服务器上的 root 目录中：

sudo cp -r dist/* /var/www/example.com

此时，您的应用程序已经部署到了服务器上。您可以通过访问您的域名来查看它：

http://example.com

启动 Nginx

完成配置和部署后，您需要启动 Nginx 以便它开始为您的应用程序提供服务。使用以下命令启动 Nginx：

sudo systemctl start nginx

访问前端页面

在浏览器中输入服务器的IP地址或域名，即可访问前端页面