从零到一部署网站(一)

前言

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

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

项目准备

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

npm create vue@latest

从零到一部署网站(一)

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

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 之后,我们可以尝试启动它以确保服务正常工作。

# 启动 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 环境。

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,而无需使用绝对路径:

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 默认的镜像源在国外,由于网络原因下载依赖会很慢,我们还需要将镜像源设为腾讯云镜像源。

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

从零到一部署网站(一)

网站部署

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

从零到一部署网站(一)

Nginx

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

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 进程:

mkdir server

cd server

npm init -y

npm install express

vim app.js

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

});

从零到一部署网站(一)

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

从零到一部署网站(一)

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

从零到一部署网站(一)

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

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 环境)。

从零到一部署网站(一)

sudo yum install git

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

sh deploy.sh

从零到一部署网站(一)

总结

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

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

原文链接:https://juejin.cn/post/7338674902280962075 作者:前端技术探索

(0)
上一篇 2024年2月24日 上午10:06
下一篇 2024年2月24日 上午10:17

相关推荐

发表评论

登录后才能评论