本教程适用于以下操作系统版本

• Ubuntu 22.04（Jammy Jellyfish）
• Ubuntu 20.04（Focal Fossa）

本页内容

• 先决条件
• 准备工作
• 安装 Node.js
• 安装 Angular CLI
• 创建示例 Angular 应用
• 为 Angular 创建 Systemd 服务文件
• 将 Nginx 配置为 Angular 的反向代理
• 访问 Angular Web 界面
• 结语

Angular.js 是一个免费且开源的 JavaScript 框架，用于构建动态应用。它允许你使用 HTML 作为模板语言，扩展 HTML 的语法，以便清晰而简洁地表达应用的各个组件。它提供了一套用于开发、更新和测试代码的工具。它具备许多特性，例如表单管理、路由等。

本教程将向你展示如何在 Ubuntu 22.04 上以 Nginx 作为反向代理来安装 Angular.js。

先决条件

• 一台运行 Ubuntu 22.04 的服务器。
• 服务器上已配置 root 密码。

准备工作

在开始之前，最好将所有系统软件包更新并升级到最新版本。你可以通过运行以下命令来更新所有软件包：

apt update -y
apt upgrade -y

所有软件包更新完成后，你可以使用以下命令安装其他所需的依赖项：

apt install curl gnupg2 gnupg git wget -y

完成后，你可以继续进行下一步。

安装 Node.js

你还需要在服务器上安装最新稳定版本的 Node.js。首先，使用以下命令添加 Node.js 软件仓库：

curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -

你应当看到如下输出：

## Run `sudo apt-get install -y nodejs` to install Node.js 16.x and npm
## You may also need development tools to build native addons:
     sudo apt-get install gcc g++ make
## To install the Yarn package manager, run:
     curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | gpg --dearmor | sudo tee /usr/share/keyrings/yarnkey.gpg >/dev/null
     echo "deb [signed-by=/usr/share/keyrings/yarnkey.gpg] https://dl.yarnpkg.com/debian stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
     sudo apt-get update && sudo apt-get install yarn

接下来，使用以下命令安装 Node.js 软件包：

apt install nodejs

Node.js 安装完成后，你可以使用以下命令验证 Node 版本：

node --version

你将看到如下输出：

v16.17.0

安装 Angular CLI

接下来，你需要在服务器上安装 Angular CLI。Angular CLI 是一个命令行工具，允许你通过命令行界面创建和管理 Angular 应用。

首先，使用以下命令将 NPM 软件包更新到最新版本：

npm install npm@latest -g

接下来，使用以下命令安装 Angular CLI：

npm install -g @angular/cli

Angular CLI 安装完成后，你可以使用以下命令验证 Angular 版本：

ng version

你应当看到如下输出：

Global setting: enabled
Local setting: No local workspace configuration file.
Effective status: enabled

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / ? \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 14.2.3
Node: 16.17.0
Package Manager: npm 8.19.2 
OS: linux x64

Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1402.3 (cli-only)
@angular-devkit/core         14.2.3 (cli-only)
@angular-devkit/schematics   14.2.3 (cli-only)
@schematics/angular          14.2.3 (cli-only)

创建示例 Angular 应用

在本节中，我们将创建一个示例 Angular 应用。

运行以下命令创建一个名为 myapp 的新应用：

ng new myapp

你将看到如下输出：

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE myapp/src/styles.css (80 bytes)
CREATE myapp/src/test.ts (749 bytes)
CREATE myapp/src/assets/.gitkeep (0 bytes)
CREATE myapp/src/environments/environment.prod.ts (51 bytes)
CREATE myapp/src/environments/environment.ts (658 bytes)
CREATE myapp/src/app/app-routing.module.ts (245 bytes)
CREATE myapp/src/app/app.module.ts (393 bytes)
CREATE myapp/src/app/app.component.css (0 bytes)
CREATE myapp/src/app/app.component.html (23115 bytes)
CREATE myapp/src/app/app.component.spec.ts (1070 bytes)
CREATE myapp/src/app/app.component.ts (209 bytes)
? Packages installed successfully.

接下来，切换到 myapp 目录并使用以下命令运行该应用：

cd myapp
ng serve --host 0.0.0.0 --port 8000

如果一切正常，你将看到如下输出：

? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics. Yes

? Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   2.10 MB | 
polyfills.js          | polyfills     | 318.00 kB | 
styles.css, styles.js | styles        | 210.08 kB | 
main.js               | main          |  49.83 kB | 
runtime.js            | runtime       |   6.51 kB | 

                      | Initial Total |   2.67 MB

Build at: 2022-09-18T07:17:07.899Z - Hash: d94baf4d66e9fad0 - Time: 26751ms

** Angular Live Development Server is listening on 0.0.0.0:8000, open your browser on http://localhost:8000/ **


? Compiled successfully.

按下 CTRL + C 停止该应用。接下来我们将为 Angular 应用创建一个 systemd 服务文件。

为 Angular 创建 Systemd 服务文件

你可以创建一个 systemd 服务文件来管理 Angular 应用。

nano /lib/systemd/system/myapp.service

添加以下行：

[Unit]
Description=MyWeb Application
After=network-online.target

[Service]
Restart=on-failure
WorkingDirectory=/root/myapp
ExecStart=/usr/bin/ng serve --port 8000
CPUAccounting=true
CPUQuota=50%
MemoryAccounting=true
MemoryLimit=1024M

[Install]
WantedBy=multi-user.target

保存并关闭文件，然后重新加载 systemd 守护进程以应用更改：

systemctl daemon-reload

接下来，使用以下命令启动并启用 Angular 服务：

systemctl start myapp
systemctl enable myapp

现在你可以使用以下命令检查 Angular 服务的状态：

systemctl status myapp

你将看到如下输出：

? myapp.service - MyWeb Application
     Loaded: loaded (/lib/systemd/system/myapp.service; disabled; vendor preset: enabled)
     Active: active (running) since Sun 2022-09-18 07:28:42 UTC; 28s ago
   Main PID: 56301 (ng serve --port)
      Tasks: 11 (limit: 4579)
     Memory: 380.1M (limit: 1.0G)
        CPU: 14.152s
     CGroup: /system.slice/myapp.service
             ??56301 "ng serve --port 8000" "" "" "" "" "" "" "" "" "" "" "" "" "" ""

Sep 18 07:28:42 ubuntu2204 systemd[1]: Started MyWeb Application.
Sep 18 07:28:49 ubuntu2204 ng[56301]: - Generating browser application bundles (phase: setup)...

现在你可以通过 systemd 轻松管理你的 Angular 应用。完成后，你可以继续进行下一步。

将 Nginx 配置为 Angular 的反向代理

此时，Angular 应用已启动并监听 8000 端口。不过，将 Nginx 配置为反向代理以通过 80 端口访问 Angular 应用是更好的做法。

首先，使用以下命令安装 Nginx Web 服务器软件包：

apt install nginx -y

Nginx 安装完成后，创建一个 Nginx 配置文件：

nano /etc/nginx/conf.d/app.conf

添加以下行：

server {  
       listen 80;
       server_name app.example.com;
       location / {  
                  proxy_pass http://localhost:8000;  
                  proxy_http_version 1.1;  
                  proxy_set_header Upgrade $http_upgrade;  
                  proxy_set_header Connection 'upgrade';  
                  proxy_set_header Host $host;  
                  proxy_cache_bypass $http_upgrade;  
               }  
}

完成后保存并关闭文件，然后使用以下命令检查 Nginx 是否存在语法错误：

nginx -t

你将看到如下输出：

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

接下来，重启 Nginx 服务以应用更改：

restart nginx

你也可以使用以下命令检查 Nginx 的状态：

systemctl status nginx

你应当看到如下输出：

? nginx.service - A high performance web server and a reverse proxy server
     Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
     Active: active (running) since Sun 2022-09-18 07:24:51 UTC; 6s ago
       Docs: man:nginx(8)
    Process: 55161 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
    Process: 55162 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
   Main PID: 55163 (nginx)
      Tasks: 3 (limit: 4579)
     Memory: 3.3M
        CPU: 28ms
     CGroup: /system.slice/nginx.service
             ??55163 "nginx: master process /usr/sbin/nginx -g daemon on; master_process on;"
             ??55164 "nginx: worker process" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""
             ??55165 "nginx: worker process" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""

Sep 18 07:24:51 ubuntu2204 systemd[1]: Starting A high performance web server and a reverse proxy server...
Sep 18 07:24:51 ubuntu2204 systemd[1]: Started A high performance web server and a reverse proxy server.

访问 Angular Web 界面

此时，Nginx 已配置为 Angular 应用的反向代理。你现在可以使用 URL http://app.example.com 进行访问。你应当在以下界面中看到你的 Angular 应用：

结语

恭喜！你已成功在 Ubuntu 22.04 上以 Nginx 作为反向代理安装了 Angular。现在你可以使用 Angular.js 框架在 Web 上开发和部署动态应用。如果你有任何问题，欢迎随时向我提问。