前言

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

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

项目准备

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

bash 复制代码

npm create vue@latest

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

bash 复制代码

cd vue-demo
npm install
npm run dev

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

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

环境准备

云服务器

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

下载依赖

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

Nginx

sudo yum install nginx

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

bash 复制代码

# 启动 nginx
sudo systemctl start nginx

# 查看 nginx 状态
sudo systemctl status nginx

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

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

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

Node

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

bash 复制代码

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

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

bash 复制代码

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

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

node -v

npm -v

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

arduino 复制代码

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

网站部署

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

Nginx

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

bash 复制代码

sudo vim /etc/nginx/nginx.conf

修改的地方分为两处：

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

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

node

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

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

bash 复制代码

mkdir server

cd server

npm init -y

npm install express

vim app.js

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

ini 复制代码

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`);

});

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

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

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

bash 复制代码

sudo nohup node server/app.js &

最终版本

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

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

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

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

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

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

bash 复制代码

sudo yum install git

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

bash 复制代码

cd web-deploy-demo

sh deploy.sh

总结

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

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

从零到一部署网站（一）

前言

项目准备

环境准备

云服务器

下载依赖

Nginx

Node

网站部署

Nginx

node

最终版本

总结