Статья №8 — Развертывание Angular Firebase
Требования
- Доступ в Интернет. (точно)
- если вы следуете шагу 1, любому терминалу командной строки.
- Рекомендую прочитать «10 лучших терминалов командной строки» (необязательно)
Начнем…
Чего мы добьемся в этой статье?
Вы начинаете с создания начального приложения с помощью Angular CLI. В этом руководстве вы будете изменять и расширять это начальное приложение, чтобы создать универсальное веб-приложение Angular и развернуть его в firebase.
В этой части руководства вы сделаете следующее:
- Настройте свою среду.
- Создайте новую рабочую область и первоначальный проект приложения.
- Внесите изменения в приложение, чтобы создать рендеринг на стороне сервера.
- Развертывание в Firebase с использованием функций и хостинга.
Создайте новую рабочую область и начальное приложение
Таким образом, для создания универсального Angular доступно несколько механизмов и сторонних зависимостей, и среди них ниже приведены два наиболее распространенных способа создания приложения Angular SSR.
// FOR NEW ENV ONLY npm i -g @angular/cli // CREATE PROJECT (always prefer .scss over css) ng new [projectName] --routing --style=scss
Итак, мы обсудим первый момент здесь, Angular Universal от Angular Team.
cd [projectName] ng add @nguniversal/express-engine
После выполнения этих шагов вы можете создать универсальное приложение Angular, теперь давайте создадим модуль с именем компонента home с маршрутизацией отложенной загрузки.
ng g c welcome -m app.module
Таким образом, он создаст домашний модуль (welcome.module.ts) с домашним компонентом (welcome.component.ts) и домашней маршрутизацией. После создания домашнего модуля добавьте динамический метатег и метаописание в файл welcome.component.ts, как показано ниже.
ngOnInit(): void {
this.addMetaTags();
}
addMetaTags() {
this.title.setTitle(‘Welcome’);
this.meta.addTags([
{ name: ‘title’, content: ‘Welcome Page’ },
{ name: ‘description’, content: ‘This is Welcome Descrition’},
{ name: ‘twitter:card’, content: ‘Welcome Page’},
{ name: ‘og:url’, content: ‘/’ },
{ name: ‘og:title’, content: ‘Welcome Page’ },
{ name: ‘og:description’, content: ‘This is Welcome Descrition’ },
{ name: ‘og:image’, content: ‘/assets/images/welcome-meta.jpg’ }
]);
}
Итак, мы добавили образец метатега для домашней страницы, поэтому теперь давайте создадим проект облачных функций Firebase в нашем проекте.
Сначала установите инструменты Firebase, необходимые для создания проекта облачных функций.
//Only if you are new npm install -g firebase-tools
Таким образом, он установит инструменты Firebase глобально, а затем даст приведенную ниже команду для создания проекта облачной функции в каталоге вашего проекта.
firebase init # select hosting, functions // use space bar
Теперь сделайте свою общую папку dist/browser, но перепишите весь трафик в функции, чтобы ваш файл firebase.json выглядел так, как показано ниже.
{
"hosting": {
"public": "dist/browser",
// ...
"rewrites": [
{
"source": "**",
"function": "ssr"
}
]
}
}
Скопируйте производственное приложение Angular (папку dist) в функциональную среду, и для этого выполните следующие шаги.
cd functions npm i fs-extra
создайте имя файла cp-angular.js в каталоге функций, а затем добавьте этот код в этот файл.
функции/cp-angular.js
const fs = require('fs-extra');
(async() => {
const src = '../dist';
const copy = './dist';
await fs.remove(copy);
await fs.copy(src, copy);
})();
Измените команду сборки для функций в файле package.json.
функции/package.json
{
"name": "functions",
"engines": {
"node": "8"
},
"scripts": {
"build": "node cp-angular && tsc"
}
}
Самой функции нужно только импортировать универсальное приложение в текущий рабочий каталог. Вот почему нам нужно скопировать его в окружение функции.
в основном добавьте это в файл functions/index[.js||.ts]. предпочитаю использовать сервер JavaScriptу меня предвзятое отношение к машинописному тексту, я не хочу, чтобы вы были экспертом в своем деле.
//const functions = require("firebase-functions"); // For .js only
//import * as functions from 'firebase-functions'; //FOR .ts only
const universal = require(`${process.cwd()}/dist/server`).app();
export const ssr = functions.https.onRequest(universal);
Итак, напишите теперь, экспортируйте функцию экспресс-приложения из файла server.ts, поэтому перейдите в файл server.ts в корневом каталоге и добавьте экспорт, который указан ниже. Более новая версия делает это автоматически, но убедитесь, что у вас есть экспорт перед функцией
function app() // replace it with below line export function app()
После этого не давайте добавим команду сборки функции в файл package.json вашего корневого каталога.
Итак, перейдите в файл [projectName]/package.json и добавьте эти строки
"build:functions": "npm run --prefix functions build" // add "build:all": "npm run build:ssr && npm run build:functions" // add
Поэтому мы добавили команду сборки для рендеринга на стороне сервера, а также для сборки функций. Итак, мы закончили со всеми настройками, и теперь пришло время собрать и развернуть. Итак, чтобы создать и развернуть в облаке функцию, введите следующую команду.
npm run build:all // build command for SSR and Functions firebase serve // test in local (optional) firebase deploy // to deploy in Cloud function
Итак, теперь универсальное приложение Angular развернуто для его тестирования, перейдите по URL-адресу и нажмите «Просмотреть источник», и вы сможете увидеть детали метатега. Таким образом, это полный и простой процесс развертывания приложения Angular Universal Server Side Rendering в облачной функции.
Теперь, когда вы запускаете npm run build:all, ваш проект будет отображаться внутри dist, но в папке вашего [projectName], так почему бы не установить прямые ссылки на dist? вы должны предпочесть вручную удалить и вставить эти файлы в dist из [projectName]. потому что однажды ты совершишь большую ошибку. вам, возможно, придется показать своему клиенту, и у вас не будет даже того, что у вас есть! Я всегда рекомендую иметь базовую резервную копию на случай таких бедствий. Надеюсь, вам понравилась моя перспектива. В противном случае вы всегда можете сделать пожертвование в DIPESH BHOIR EDUCATION FUND через службу поддержки. ;)
ЛЮБОПЫТНЫЙ ФАКТ
Я ПРОЧИТАЮ СВОИ СТАТЬИ, КОГДА СЛУЧАЮ ОШИБКИ, ПОТОМУ ЧТО ОНИ ТАК ХОРОШО НАПИСАНЫ!
Надеюсь, эта статья помогла!
Благодарен? ХЛОП МОЖЕТ ПОМОЧЬ ЭТОМУ ПРИОБРЕСТИ БОЛЬШУЮ АУДИТОРИЮ!
^Помните! В основном не публикуется! основной для связи.
Другие темы, которые вы, возможно, захотите продолжить читать.
