从前端到全栈–入门篇

本次分享从前端开发人员视角出发，直接上手实践。

准备工作

熟悉 VS Code 编辑器基础操作

熟悉 Javascript、Node 编程

熟悉 Linux 基础命令

一台 Linux 服务器（云服务器、WSL、虚拟机 三者都可）

SSH工具（Putty）

tips：本文所有演示是在 ubuntu22.04 下完成

服务器配置

通过SSH工具登录服务器，root/password

安装前端开发常用工具

Node版本管理工具：NVM

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install 18.19.0
nvm use 18.19.0
node -v
npm -v

NPM镜像管理工具：NRM

npm install -g nrm

nrm ls
* npm ---------- https://registry.npmjs.org/
  yarn --------- https://registry.yarnpkg.com/
  tencent ------ https://mirrors.cloud.tencent.com/npm/
  cnpm --------- https://r.cnpmjs.org/
  taobao ------- https://registry.npmmirror.com/
  npmMirror ---- https://skimdb.npmjs.com/registry/

nrm use taobao

版本控制系统：Git

sudo apt update1
sudo apt install git
git --version

PM2

PM2是一个流行的Node.js应用程序的生产过程管理器。它可以让你 保持应用程序的持续运行，重新加载它们而不会影响到它们的运行，监控它们的状态和资源使用情况，以及在它们崩溃或者重启时提供日志支持。

以下是一些基本的PM2命令：

# 安装PM2

npm install -g pm2

# 启动一个应用

pm2 start app.js

# 列出所有由PM2管理的应用

pm2 list

# 查看应用的详细信息

pm2 show <app_name>

# 停止一个应用

pm2 stop <app_name>

# 重启一个应用

pm2 restart <app_name>

# 删除一个应用

pm2 delete <app_name>

# 查看应用的日志

pm2 logs <app_name>

在这些命令中，<app_name>是你的应用的名称，你可以在pm2 start命令中指定它。

PM2还有许多其他的高级功能，如集群模式、应用监控、自动重启等。你可以在PM2的官方文档中找到更多的信息：http://pm2.keymetrics.io/

服务器端编辑器

安装编辑器：Code Server

curl -fsSL https://code-server.dev/install.sh | sh

或

wget https://github.com/coder/code-server/releases/download/v4.21.1/code-server_4.21.1_amd64.deb

或直接在 github 下载解压至 /cs/code-server 目录下

安装

dpkg -i code-server_4.21.1_amd64.deb

运行一次生成配置文件（可去修改配置文件密码 vim ~/.config/code-server/config.yaml，我选择是命令加参数的方式）

code-server

开启服务

sudo systemctl start code-server@root

开机自启

sudo systemctl enable code-server@root

命令加参数，编写启动脚本 start_vscode.sh

code-server --port 8089 --host 0.0.0.0 --auth password

这里我们启动 web server，演示效果：

防火墙只开放了4000端口，4001无法访问

WEB、API Server

我们可以用 VSCode 创建 Web Server、Api Server 工程。

KOA

在Node.js中，你可以使用Koa框架来搭建Web服务。以下是一个基本的示例，展示如何使用Koa创建一个简单的Web服务：

首先，你需要安装Koa。在你的项目目录中运行以下命令：

npm install koa

然后，你可以创建一个新的Koa应用，并监听一个端口：

const Koa = require('koa');
const app = new Koa();
app.use(async ctx => {
  ctx.body = 'Hello World';
});
app.listen(3000);

在这个示例中，我们首先导入了Koa，然后创建了一个新的Koa应用。我们使用app.use方法添加了一个中间件，这个中间件会对所有请求返回”Hello World”。最后，我们使用app.listen方法让应用监听3000端口。

Express

在Node.js中，你可以使用Express框架来搭建Web服务。以下是一个基本的示例，展示如何使用Express创建一个简单的Web服务：

首先，你需要安装Express。在你的项目目录中运行以下命令：

npm install express

然后，你可以创建一个新的Express应用，并监听一个端口：

const express = require('express');
const app = express();
app.get('/', (req, res) => {
  res.send('Hello World!');
});
app.listen(3000, () => {
  console.log('App is listening on port 3000');
});

在这个示例中，我们首先导入了Express，然后创建了一个新的Express应用。我们使用app.get方法添加了一个路由，这个路由会对根URL（’/‘）的GET请求返回”Hello World!”。最后，我们使用app.listen方法让应用监听3000端口。

数据库

我们可以使用 VSCode 命令行工具安装数据库

MySQL

在 Ubuntu上 安装 MySQL，你可以使用apt包管理器。以下是具体的步骤：

1. 首先，更新你的包列表：

   sudo apt update

2. 然后，安装MySQL服务器：

   sudo apt install mysql-server

3. 安装完成后，运行安全安装脚本来设置密码和其他安全设置：

   sudo mysql_secure_installation

   这个脚本会提示你设置root用户的密码，移除匿名用户，禁止root用户远程登录，移除测试数据库，以及重新加载权限表。

4. 最后，你可以使用以下命令来检查MySQL服务的状态：

   sudo systemctl status mysql

   如果MySQL服务正在运行，你应该能看到”active (running)”的状态信息。

以上就是在Ubuntu上安装MySQL的步骤。

MongoDB

在Ubuntu上安装MongoDB，你可以按照以下步骤操作：

1. 首先，更新你的包列表：

   sudo apt update

2. 然后，安装MongoDB：

   sudo apt install mongodb

3. 安装完成后，MongoDB会自动启动。你可以使用以下命令来检查MongoDB的状态：

   sudo systemctl status mongodb

   如果MongoDB正在运行，你应该能看到”active (running)”的状态信息。

4. 如果你想要MongoDB在启动时自动运行，你可以使用以下命令：

   sudo systemctl enable mongodb

以上就是在Ubuntu上安装MongoDB的步骤。

SQLite

在Ubuntu上安装SQLite，你可以使用apt包管理器。以下是具体的步骤：

1. 首先，更新你的包列表：

   sudo apt update

2. 然后，安装SQLite3：

   sudo apt install sqlite3

3. 安装完成后，你可以通过在终端输入sqlite3来启动SQLite：

   sqlite3

   如果SQLite安装成功，你应该会看到SQLite的命令提示符。

以上就是在Ubuntu上安装SQLite的步骤。

ORM框架

ORM（Object-Relational Mapping，对象关系映射）框架是一种编程技术，用于将对象模型和数据模型之间的不匹配问题转化为它们之间的元数据描述。这样，程序员就可以以面向对象的方式操作数据库，而不需要编写大量的SQL代码。

以下是一些常见的ORM框架：

JavaScript：

1. Sequelize：Sequelize是一个基于Promise的Node.js ORM框架，支持Postgres、MySQL、MariaDB、SQLite和Microsoft SQL Server。
2. TypeORM：TypeORM是一个在TypeScript和JavaScript（ES5、ES6、ES7、ES8）中运行的ORM，支持MySQL、MariaDB、PostgreSQL、CockroachDB、SQLite、Microsoft SQL Server、Oracle、WebSQL等数据库。

Python：

1. SQLAlchemy：SQLAlchemy是Python中最流行的ORM框架，它提供了全面的SQL支持和强大的ORM模型。
2. Django ORM：Django ORM是Django框架的一部分，它提供了一个高级的ORM接口，可以处理大部分的数据库操作。

Java：

1. Hibernate：Hibernate是Java世界中最流行的ORM框架，它提供了一个全面的数据查询和操作的解决方案。
2. MyBatis：MyBatis是一个支持定制SQL、存储过程以及高级映射的Java ORM框架。

Ruby：

1. Active Record：Active Record是Ruby on Rails框架的一部分，它实现了Active Record设计模式，提供了一个高级的ORM接口。

这些ORM框架都有各自的优点和缺点，选择哪一个取决于你的具体需求和偏好。

以下为3个ORM框架基础使用方法：

mongoose

MongoDB object modeling designed to work in an asynchronous environment.

在Node.js中，你可以使用Mongoose库来连接到MongoDB数据库。以下是一个基本的示例，展示如何使用Mongoose连接到MongoDB数据库：

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/test', {useNewUrlParser: true, useUnifiedTopology: true});

const db = mongoose.connection;

db.on('error', console.error.bind(console, 'connection error:'));

db.once('open', function() {
  // we're connected!
  console.log("We're connected to the database");
});

在这个示例中，我们首先导入了Mongoose，然后使用mongoose.connect方法连接到了本地的MongoDB数据库。我们传入了数据库的URL（在这个例子中，数据库名为’test’）和一些连接选项。

然后，我们获取了数据库连接实例，并设置了两个事件监听器：一个用于监听连接错误，另一个用于监听连接成功。

sequelize

Feature-rich ORM for modern Node.js and TypeScript, it supports PostgreSQL (with JSON and JSONB support), MySQL, MariaDB, SQLite, MS SQL Server, Snowflake, Oracle DB (v6), DB2 and DB2 for IBM i.

下面演示 连接sqlite3和mysql数据库

npm install sequelize sqlite3

在Node.js中，你可以使用Sequelize库来连接到SQLite数据库。以下是一个基本的示例，展示如何使用Sequelize连接到SQLite数据库：

const { Sequelize } = require('sequelize');

const sequelize = new Sequelize({
  dialect: 'sqlite',
  storage: 'path/to/database.sqlite'
});

// Test the connection
sequelize.authenticate()
  .then(() => {
    console.log('Connection has been established successfully.');
  })
  .catch(err => {
    console.error('Unable to connect to the database:', err);
  });

在这个示例中，我们首先导入了Sequelize，然后创建了一个新的Sequelize实例，传入了方言和存储路径。然后，我们使用authenticate方法来测试连接

---

在Node.js中，你可以使用Sequelize库来连接到MySQL数据库。以下是一个基本的示例，展示如何使用Sequelize连接到MySQL数据库：

const { Sequelize } = require('sequelize');

// Option 1: Passing a connection URI
const sequelize = new Sequelize('mysql://user:pass@localhost:3306/dbname');

// Option 2: Passing parameters separately (other dialects)
const sequelize = new Sequelize('database', 'username', 'password', {
  host: 'localhost',
  dialect: 'mysql'
});

// Test the connection
sequelize.authenticate()
  .then(() => {
    console.log('Connection has been established successfully.');
  })
  .catch(err => {
    console.error('Unable to connect to the database:', err);
  });

在这个示例中，我们首先导入了Sequelize，然后创建了一个新的Sequelize实例，传入了数据库的名称、用户名、密码、主机和方言。然后，我们使用authenticate方法来测试连接。

typeorm

ORM for TypeScript and JavaScript. Supports MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, SAP Hana, WebSQL databases. Works in NodeJS, Browser, Ionic, Cordova and Electron platforms.

npm install typeorm --save

Nginx

Nginx是一款非常流行的Web服务器软件

sudo apt update
sudo apt install nginx

以下是一些常用的Nginx命令：

1. 启动Nginx：你可以使用以下命令来启动Nginx：

   sudo systemctl start nginx

2. 停止Nginx：你可以使用以下命令来停止Nginx：

   sudo systemctl stop nginx

3. 重启Nginx：你可以使用以下命令来重启Nginx：

   sudo systemctl restart nginx

4. 重新加载Nginx配置：当你修改了Nginx的配置文件后，你可以使用以下命令来重新加载配置，而无需重启Nginx：

   sudo systemctl reload nginx

5. 查看Nginx状态：你可以使用以下命令来查看Nginx的运行状态：

   sudo systemctl status nginx

6. 设置Nginx开机自启：你可以使用以下命令来设置Nginx在系统启动时自动运行：

   sudo systemctl enable nginx

7. 取消Nginx开机自启：你可以使用以下命令来取消Nginx在系统启动时自动运行：

   sudo systemctl disable nginx

请注意，以上命令在大多数Linux发行版上都可以使用，但在某些系统上，你可能需要使用其他命令来管理Nginx。例如，在较旧的系统上，你可能需要使用service命令代替systemctl。

根域名可以代理 静态文件 或 本地服务

代理二级域名

代理二级目录

二级域名和二级目录是网站结构中的两个不同概念：

1. 二级域名：二级域名是主域名的子域名。例如，在blog.example.com中，blog就是example.com的二级域名。二级域名通常用于区分网站的不同部分或服务，例如博客、论坛或商店。
2. 二级目录：二级目录是网站URL中的一个部分，它表示网站内容的一个子集。例如，在www.example.com/blog中，/blog就是一个二级目录。二级目录通常用于组织网站的内容，例如文章、产品或类别

FRP

FRP（Fast Reverse Proxy）是一个高性能的反向代理应用，它可以帮助你轻松地将你的内网服务暴露到公网。FRP支持TCP、UDP、HTTP、HTTPS等多种协议，并提供了丰富的配置选项。

以下是一个基本的FRP使用示例：

首先，你需要在你的公网服务器（也称为FRP服务器）上运行FRP服务端。你可以从FRP的GitHub仓库下载预编译的二进制文件，然后创建一个配置文件frps.ini：

[common]
bind_port = 7000

然后，你可以运行FRP服务端：

./frps -c ./frps.ini

接下来，你需要在你的内网机器（也称为FRP客户端）上运行FRP客户端。同样，你可以从FRP的GitHub仓库下载预编译的二进制文件，然后创建一个配置文件frpc.ini：

[common]
server_addr = x.x.x.x
server_port = 7000

[web]
type = http
local_port = 80
custom_domains = www.example.com

在这个配置中，x.x.x.x是你的公网服务器的IP地址，www.example.com是你的域名。

然后，你可以运行FRP客户端：

./frpc -c ./frpc.ini

现在，你的内网服务应该已经被暴露到公网了。你可以通过访问www.example.com来访问你的内网服务。

请注意，这只是一个基本的示例，FRP还有许多其他的高级功能和配置选项，你可以在FRP的官方文档中找到更多的信息：https://github.com/fatedier/frp

Redis

Redis是一个开源的、内存中的数据结构存储系统，它可以用作数据库、缓存和消息代理。它支持多种类型的数据结构，如字符串、哈希、列表、集合、有序集合、位图、hyperloglogs和地理空间索引半径查询。

Redis的主要特点包括：

• 性能高：所有数据都存储在内存中，读写速度非常快。
• 持久化：虽然数据存储在内存中，但Redis可以将数据定期或按照一定的写入规则写入磁盘，以保证数据的持久性。
• 支持多种数据结构：Redis支持多种数据结构，可以满足各种复杂的应用场景。
• 支持发布订阅模式：Redis支持发布订阅模式，可以用作消息队列。
• 事务支持：Redis支持事务，所有命令在事务中都会被序列化、按顺序执行。

在Ubuntu上快速部署Redis，你可以使用apt包管理器。首先，你需要更新你的包列表，然后安装Redis。以下是具体的命令：

sudo apt update
sudo apt install redis-server

安装完成后，你可以使用以下命令来启动Redis：

sudo service redis-server start

然后，你可以使用以下命令来测试Redis是否正在运行：

redis-cli ping

如果Redis正在运行，这条命令会返回”PONG”

Docker

比较耗费服务器资源，不建议在入门级机器上搭建。

Docker是一个开源的应用容器引擎，允许开发者将应用及其依赖打包到一个可移植的容器中，然后发布到任何流行的Linux或Windows机器上，也可以实现虚拟化。容器是完全使用沙箱机制，相互之间不会有任何接口。

以下是一个简单的Docker命令示例，用于下载一个Docker镜像，创建一个新的Docker容器，并在容器中运行一个应用：

# 下载一个Docker镜像

docker pull ubuntu:18.04

# 创建一个新的Docker容器

docker run -it --name my-container ubuntu:18.04

# 在容器中运行一个应用

docker exec -it my-container bash

Docker的主要优点包括：

• 可移植性：由于Docker容器包含了所有的依赖，所以它们可以在任何支持Docker的机器上运行，无论这台机器的操作系统和配置如何。
• 轻量级：Docker容器比传统的虚拟机更轻量级，因为它们直接运行在宿主机的内核上，而不需要模拟整个操作系统。
• 版本控制：Docker可以像Git一样对容器版本进行管理，你可以很容易地回滚到旧版本的容器。
• 隔离性：每个Docker容器都在自己的环境中运行，因此它们之间是完全隔离的。
• 自动化：Docker提供了自动化的应用部署、扩缩容和版本管理等功能。

Self-host 搭建

gitlab

wiki

hexo、wordpress

alist

obsidian、jplin

photoprism

nextcloud

总结

全栈完整访问流程：

域名 或 IP（端口）-> Nginx -> Web Server（SPA、SSR等）– API Server（KOA、Express等）-> ORM框架 –> SQL（MySQL、SQLite、MongDB）

重点掌握知识点：Linux基础命令、Server搭建、Nginx配置、ORM框架

拓展知识

FRP应用场景

1. 本地服务 穿透 到外网服务器（开发调试用）

2. 家里nas服务器（带宽依赖家里）（docker运行nextcloud、photoprism等等服务）穿透到 外网服务器
   a. 群晖等专业级nas

   b. 迷你主机（win11、16g内存、硬盘自己扩展）
   （由于国内宽带没有固定IP，想把家里的服务穿透到外网随时访问。家里电脑、nas服务器性能更高，可以跑docker等更多服务）

---

科学上网一键部署脚本

系统支持：Ubuntu，Debian，CentOS，推荐使用 Ubuntu 22，谨慎使用 CentOS，脚本可能无法正常运行！

执行如下命令：

bash <(wget -qO- -o- https://git.io/v2ray.sh)

233boy/v2ray: 最好用的 V2Ray 一键安装脚本 & 管理脚本 (github.com)

---

自建云服务器

家里的N100迷你主机，16g内存、512固态硬盘、512机械硬盘，作为云服务器。
接上显示器可以当电脑使用，和之前i5 4590性能差不太多。
预算<1200元，每天耗费电量 0.2度 约等于1毛钱。

可以跑一些windows、node、Docker服务。
分配2g内存、1~2核心给doker
用frp内网穿透，把服务代理去外网服务器。

这样你就有自己的大容量云盘、云笔记、云相册…