Hostinger MEAN Stack VPS 模板使用教程

MEAN 技术栈 是一个流行的全栈开发框架，由 MongoDB、Express.js、Angular 和 Node.js 组成：

• MongoDB 是一个 NoSQL 数据库
• Express.js 是一个服务器端 Web 应用框架
• Angular 是一个用于构建动态用户界面的前端框架
• Node.js 是一个服务器端 JavaScript 运行时环境

该技术栈支持端到端的 JavaScript 开发，促进服务器与客户端之间的无缝通信。MEAN 技术栈以灵活性和可扩展性著称，被广泛用于创建现代实时 Web 应用。

使用我们的 MEAN Stack VPS 模板，你还会发现 PM2、Certbot 和 Nginx 已预装，可进一步简化开发和部署流程。

第 1 步 — 设置你的项目

打开终端，为你的 MEAN 技术栈项目创建一个新目录。为方便起见，VPS 中已预创建了 /root/application 目录，并且其中已包含 Express.js 和 Angular。

mkdir mean-stack-app
cd mean-stack-app

第 2 步 — 使用 Express.js 和 Node.js 搭建后端

首先，初始化一个 Node.js 项目。运行以下命令来初始化一个 package.json 文件：

npm init -y

然后，安装 Express.js，这是一个用于 Node.js 的 Web 应用框架：

npm install express

现在，创建一个基本的 Express 服务器。创建一个名为 server.js 的文件，并搭建一个基本的 Express 服务器：

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
 res.send('Hello MEAN Stack!');
});

app.listen(port, () => {
 console.log(`Server is running on port ${port}`);
});

最后，使用以下命令启动你的 Express 服务器：

node server.js

打开浏览器并访问 http:///your_vps_ip:3000，即可看到 Hello MEAN Stack! 提示信息。请务必将 your_vps_ip 替换为你的**服务器 IP 地址**。

第 3 步 — 使用 Angular 搭建前端

使用以下命令全局安装 Angular CLI：

npm install -g @angular/cli

在你的项目目录中，运行以下命令来生成一个新的 Angular 应用：

ng new angular-app

按照提示配置你的应用。之后，进入 Angular 应用目录：

cd angular-app

然后启动 Angular 开发服务器：

ng serve

打开浏览器并访问 http:///your_vps_ip:4200，即可看到你的 Angular 应用。请务必将 your_vps_ip 替换为你的**服务器 IP 地址**。

第 4 步 — 连接 Express.js 和 Angular

更新你的 Express 服务器（server.js），以便托管 Angular 应用：

const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

// Serve Angular app
app.use(express.static(path.join(__dirname, 'angular-app/dist/angular-app')));

// Handle all other routes
app.get('*', (req, res) => {
 res.sendFile(path.join(__dirname, 'angular-app/dist/angular-app/index.html'));
});

app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});

为生产环境构建你的 Angular 应用：

ng build

这将在 Angular 应用目录中创建一个 dist 文件夹。

最后，返回项目根目录并运行你更新后的 Express 服务器：

node server.js

访问 **http://your\_vps\_ip:3000**，即可看到带有 Angular 的 MEAN 技术栈应用。

恭喜！你已经搭建好了一个基本的 MEAN 技术栈应用。接下来，你可以使用 MongoDB 添加数据库功能，并通过 Express.js 和 Angular 集成更多其他功能，从而扩展和增强你的应用。