从零到一部署网站（一）

前言

        对于许多前端初学者以及职场新人来说，从零到一部署网站是一项艰巨的任务。本文将详细介绍如何在云服务器下从零到一部署网站，让每位开发者都能轻松拥有自己的网站。此外，对于过于依赖前辈完成部署工作的开发者，本文也将提供必要的知识和工作，以便在面对新的部署需求时，能够独立应对。

        源码地址：https://github.com/baburwang/web-deploy-demo.git

项目准备

        为了启动我们的网站部署流程，我们首先需要准备一个项目——这将是我们要部署的网站。在本教程中，我们将使用 Vue.js 的最新版本来快速搭建一个全新的项目。

npm create vue@latest
1

        在项目创建完成后，下一步是在本地环境中运行该项目，以便我们可以在浏览器中预览和测试我们的应用。通过执行以下命令来启动开发服务器：

cd vue-demo
npm install
npm run dev
1
2
3

        当在浏览器中看到网页内容正常显示时，这意味着项目已经在本地环境中成功运行。现在，我们已经准备好将构建好的网站内容部署到云服务器上，以便它可以在互联网上被访问。

        dist 目录中包含了准备部署的所有静态文件。

环境准备

云服务器

        首先在腾讯云购买一台云服务器，选择基于操作系统镜像的方式创建。这样创建的好处是没有预装任何软件，我们手动去安装相关软件，可以更加深刻理解网站部署流程。

下载依赖

        使用 Nginx 和 Node.js 服务是两种常见的网站部署方式。Nginx 是一个高性能的 HTTP 和反向代理服务器，通常用于静态内容的部署和代理动态请求到 Node.js 应用程序。Node.js 则是一个服务器端 JavaScript 运行环境，适合运行基于 JavaScript 的应用程序。

Nginx

sudo yum install nginx
1

        在安装好 Nginx 之后，我们可以尝试启动它以确保服务正常工作。

# 启动 nginx
sudo systemctl start nginx

# 查看 nginx 状态
sudo systemctl status nginx
1
2
3
4
5

        当 Nginx 状态显示为 “active” 时，这表明 Nginx 服务已经成功启动并正在运行。此时，你可以通过实例的公网 IP 地址来访问 Nginx。

        默认情况下，Nginx 会监听 80 端口（HTTP）和 443 端口（HTTPS，如果已配置 SSL 证书）。

        至此，我们成功完成了 Nginx 的安装并验证了 Nginx 运行正常。

Node

        由于我们还打算使用 Node.js 来托管网站，那么需要在服务器上安装 Node.js 环境。

wget https://nodejs.org/download/release/v16.20.2/node-v16.20.2-linux-x64.tar.gz

tar -xvf node-v16.20.2-linux-x64.tar.gz
1
2
3

        接着建立软链接，以便我们可以直接通过对应的命令运行 node，而无需使用绝对路径：

sudo ln -s /home/lighthouse/node-v16.20.2-linux-x64/bin/node /usr/local/bin/node

sudo ln -s /home/lighthouse/node-v16.20.2-linux-x64/bin/npm /usr/local/bin/npm
1
2
3

        我们可以通过运行如下命令，查看 Node 环境是否正常：

node -v

npm -v
1
2
3

        npm 默认的镜像源在国外，由于网络原因下载依赖会很慢，我们还需要将镜像源设为腾讯云镜像源。

npm config set registry https://mirrors.cloud.tencent.com/npm/
1

网站部署

        在安装好 Nginx 和 Node.js 之后，下一步是将网站静态资源 dist 目录上传到云服务器。点击腾讯云终端访问上的图标即可完成上传。

Nginx

        Nginx 的配置文件位置为 /etc/nginx/nginx.conf ，我们需要修改该配置文件将托管的目录变为 dist 的目录。

sudo vim /etc/nginx/nginx.conf
1

        修改的地方分为两处：

1、user nginx; 替换为 user root;

2、将 root /usr/share/nginx/html; 替换为 root /home/lighthouse/dist;

        /home/lighthouse/dist 为构建文件的目录。

        修改好后，记得运行 sudo nginx -t 检查配置是否存在错误：

        如果不存在错误的话，接着运行如下命令重新加载 Nginx，以便配置生效。

sudo systemctl reload nginx
1

        至此，我们便可以实现了在云服务器中使用 Nginx 部署网站，可以直接访问到我们的网站了。

node

        启动一个 Node.js 服务进程来托管网站是一种常见且灵活的方式。

        首先，我们云服务器中启动一个 Node Web 进程：

mkdir server

cd server

npm init -y

npm install express

vim app.js
1
2
3
4
5
6
7
8
9

        app.js 的内容如下，我们使用 express 启动一个 Web 服务器并托管静态资源：

const express = require('express');

const path = require('path');

const app = express();

app.use(express.static('/home/lighthouse/dist'));

app.listen(81, () => {

  console.log(`Server is start`);

});
1
2
3
4
5
6
7
8
9
10
11
12
13

        由于 80 端口被 Nginx 占用，这里我们选择 81 端口。绝大多数云服务器都配置了防火墙，我们还需要开放 81 端口，允许被外网访问。

        开放好 81 端口，我们便可以访问到网站了。

        还有一个问题，就是当我们关闭终端时，Web 服务会停止，网站便无法访问了，这里我们可以选择通过后台运行的方式启动。

sudo nohup node server/app.js &
1

最终版本

        为什么说 Node 部署网站是一个更好的选择，这样的方式用户访问网站时，会先进入 Web 服务进程中，我们可以在该进程中做许多自定义操作，如日志记录、异常拦截等。

        在实际项目中，Web 服务进程通常与特定的网站或应用程序紧密绑定。这意味着 Web 服务进程的代码通常与网站的其他代码一起存储在同一个代码库中，并且针对该网站的需求进行定制。

        我们在项目根目录下创建一个用于启动 Web 服务器的模块，如下所示：

        同时，我们需要在 server/packge.json 中指定 Web 服务器的启动命令

        由于在 app.js 中，我们指定的静态资源文件为 path.resolve(__dirname, 'dist') 也就是说我们需要将打包好的静态资源放在和 app.js 同级目录下，在 vite.config.js 文件中指定输出目录。

        为了简化部署、启动流程，单独准备了个脚本，只需 clone 下项目后，运行该脚步即可完成网站部署（云服务器中需要准备好 Node 环境）。

sudo yum install git

git clone https://github.com/baburwang/web-deploy-demo.git
1
2
3

cd web-deploy-demo

sh deploy.sh
1
2
3

总结

        在上述内容中，我们分别介绍了如何在 Nginx 以及 Node 环境下部署网站，但我们距离最终完成还差一部分工作。我们还需要完成域名绑定、后端接口交互，这部分内容将在下一篇文章中介绍。

        如果你对于以上内容存在困惑，请在评论区留言。