Angular.js — это бесплатный JavaScript-фреймворк с открытым исходным кодом, используемый для создания динамических приложений. Он позволяет использовать HTML в качестве языка шаблонов, расширяя синтаксис HTML для четкого и лаконичного выражения компонентов вашего приложения. Он предлагает набор инструментов для разработки, обновления и тестирования кода. Имеет множество функций, таких как управление формами, маршрутизация и т. д.
В этом руководстве мы покажем вам, как установить Angular.js с Nginx в качестве обратного прокси на Ubuntu 22.04.
Начало работы
Перед началом работы стоит обновить все системные пакеты до последней версии. Вы можете обновить их все, выполнив следующую команду:
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, чтобы остановить приложение. Мы создадим служебный файл systemd для приложения Angular.
Создание файла службы Systemd для Angular
Вы можете создать файл службы 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)...
Теперь вы можете легко управлять своим Angular-приложением через systemd. Как только вы закончите, вы можете перейти к следующему шагу.
Настройка Nginx в качестве обратного прокси для Angular
На этом этапе приложение Angular запущено и прослушивает порт 8000. Однако хорошей идеей будет настроить Nginx в качестве обратного прокси для доступа к приложению Angular через порт 80.
Сначала установите пакет веб-сервера Nginx с помощью следующей команды:
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
На этом этапе Nginx настроен как обратный прокси для приложения Angular. Теперь вы можете получить к нему доступ, используя URL http://app.example.com. Вы должны увидеть ваше приложение Angular на следующем экране:
