Cách cài đặt Angular trên Ubuntu 22.04

[theanh]

Angular.js là một khuôn khổ JavaScript miễn phí và mã nguồn mở được sử dụng để xây dựng các ứng dụng động. Nó cho phép bạn sử dụng HTML làm ngôn ngữ mẫu để mở rộng cú pháp HTML nhằm thể hiện các thành phần của ứng dụng một cách rõ ràng và ngắn gọn. Nó cung cấp một bộ công cụ để phát triển, cập nhật và kiểm tra mã. Nó có nhiều tính năng, chẳng hạn như quản lý biểu mẫu, định tuyến, v.v.

Hướng dẫn này sẽ chỉ cho bạn cách cài đặt Angular.js với Nginx làm proxy ngược trên Ubuntu 22.04.

Điều kiện tiên quyết​

• Một máy chủ chạy Ubuntu 22.04.
• Mật khẩu gốc được cấu hình trên máy chủ.

Bắt đầu​

Trước khi bắt đầu, hãy cập nhật và nâng cấp tất cả các gói hệ thống lên phiên bản mới nhất. Bạn có thể cập nhật tất cả chúng bằng cách chạy lệnh sau:

apt update -y
apt upgrade -y

Sau khi tất cả các gói được cập nhật, bạn có thể cài đặt các phụ thuộc bắt buộc khác bằng lệnh sau lệnh:

apt install curl gnupg2 gnupg git wget -y

Sau khi hoàn tất, bạn có thể tiến hành bước tiếp theo.

Cài đặt Node.js​

Bạn cũng sẽ cần cài đặt phiên bản ổn định mới nhất của Node.js trên máy chủ của mình. Trước tiên, hãy thêm kho lưu trữ Node.js bằng lệnh sau:

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

Bạn sẽ nhận được kết quả sau:

## 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

Tiếp theo, hãy cài đặt gói Node.js bằng lệnh sau lệnh:

apt install nodejs

Sau khi Node.js được cài đặt, bạn có thể xác minh phiên bản Node bằng lệnh sau:

node --version

Bạn sẽ nhận được thông báo sau đầu ra:

v16.17.0

Cài đặt Angular CLI​

Tiếp theo, bạn sẽ cần cài đặt Angular CLI trên máy chủ của mình. Angular CLI là một công cụ dòng lệnh cho phép bạn tạo và quản lý ứng dụng Angular thông qua giao diện dòng lệnh.

Đầu tiên, hãy cập nhật gói NPM lên phiên bản mới nhất bằng lệnh sau:

npm install npm@latest -g

Tiếp theo, hãy cài đặt Angular CLI bằng lệnh sau:

npm install -g @angular/cli

Sau khi Angular CLI được cài đặt, bạn có thể xác minh phiên bản Angular bằng lệnh sau lệnh:

ng version

Bạn sẽ nhận được kết quả sau:

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)

Tạo ứng dụng Angular mẫu​

Trong phần này, chúng ta sẽ tạo một ứng dụng Angular mẫu.

Chạy lệnh sau để tạo ứng dụng mới có tên myapp:

ng new myapp

Bạn sẽ nhận được kết quả sau:

? 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.

Tiếp theo, hãy thay đổi thư mục thành thư mục myapp và chạy ứng dụng bằng lệnh sau lệnh:

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

Nếu mọi thứ đều ổn, bạn sẽ nhận được kết quả sau:

? 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.

Nhấn CTRL + C để dừng ứng dụng. Chúng tôi sẽ tạo một tệp dịch vụ systemd cho ứng dụng Angular.

Tạo một tệp dịch vụ Systemd cho Angular​

Bạn có thể tạo một tệp dịch vụ systemd để quản lý ứng dụng Angular.

nano /lib/systemd/system/myapp.service

Thêm các dòng sau:

[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

Lưu và đóng sau đó, tệp tải lại daemon systemd để áp dụng các thay đổi:

systemctl daemon-reload

Tiếp theo, hãy khởi động và kích hoạt dịch vụ Angular bằng lệnh sau:

systemctl start myapp
systemctl enable myapp

Bây giờ, bạn có thể kiểm tra trạng thái của dịch vụ Angular bằng lệnh sau lệnh:

systemctl status myapp

Bạn sẽ nhận được kết quả đầu ra sau:

? 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)...

Bây giờ bạn có thể dễ dàng quản lý ứng dụng Angular của mình thông qua systemd. Sau khi hoàn tất, bạn có thể tiến hành bước tiếp theo.

Cấu hình Nginx làm Proxy ngược cho Angular​

Lúc này, ứng dụng Angular được khởi động và lắng nghe trên cổng 8000. Tuy nhiên, bạn nên cấu hình Nginx làm proxy ngược để truy cập ứng dụng Angular qua cổng 80.

Trước tiên, hãy cài đặt gói máy chủ web Nginx bằng lệnh sau:

apt install nginx -y

Sau khi Nginx được cài đặt, hãy tạo tệp cấu hình Nginx:

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

Thêm nội dung sau dòng:

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; }
}

Lưu và đóng tệp khi bạn hoàn tất, sau đó xác minh Nginx xem có lỗi cú pháp nào không bằng lệnh sau:

nginx -t

Bạn sẽ nhận được thông báo sau đầu ra:

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

Tiếp theo, khởi động lại dịch vụ Nginx để áp dụng các thay đổi:

restart nginx

Bạn cũng có thể kiểm tra trạng thái của Nginx bằng lệnh sau lệnh:

systemctl status nginx

Bạn sẽ nhận được kết quả sau:

? 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.

Truy cập Angular Web UI​

Tại thời điểm này, Nginx được cấu hình làm proxy ngược cho ứng dụng Angular. Bây giờ bạn có thể truy cập bằng URL

http://app.example.com.

Bạn sẽ thấy ứng dụng Angular của mình trên màn hình sau:


data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22750%22%20height=%22374%22%3E%3C/svg%3E

Kết luận​

Xin chúc mừng! Bạn đã cài đặt thành công Angular với Nginx làm proxy ngược trên Ubuntu 22.04. Bây giờ bạn có thể phát triển và triển khai ứng dụng động trên web bằng cách sử dụng khuôn khổ Angular.js. Hãy thoải mái hỏi tôi nếu bạn có bất kỳ câu hỏi nào.