Важное примечание : Это решение было взято из раздела вопросов и ответов Углового курса по Удеми ( здесь ). Я опробовал его и с некоторыми изменениями смог заставить его работать.
Итак, сначала убедитесь, что SSR действительно работает, запустив npm run build:ssr и npm run serve:ssr.
Затем установите FirebaseИнструменты и инициализация проекта:
- Если вы ранее не устанавливали Инструменты командной строки Firebase, запустите
npm install -g firebase-tools - Запустите
firebase login, предоставив свои учетные данные Firebase (электронная почта/ пароль), если требуется. - Выполнить
firebase init
Ответить на несколько вопросов ...
"Вы готовы продолжить? "
Введите y и нажмите клавишу ВВОД.
" Какие функции CLI для Firebase вы хотите настроить? "
Выберите ...
(*) Functions
(*) Hosting
..., выбрав и клавишу пробела, и нажав клавишу ВВОД.
"Выбрать проект Firebase по умолчанию для этого каталога?"
Выберите один из них с помощью клавиш со стрелками и нажмите ENTER.
«Какой язык вы хотели бы использовать для написания облачных функций?»
Выбрать TypeScript с помощью клавиш со стрелками и нажмите ENTER.
"Хотите использовать TSLint?"
Введите y и нажмите ENTER.
"Хотите ли вы установить зависимости с помощью npm сейчас?"
Введите y и нажмите клавишу ВВОД.
"Что вы хотитеиспользовать в качестве общедоступного каталога? "
Введите dist/browser и нажмите клавишу ВВОД (обратите внимание: это отличается от развертывания приложения без Universal!).
"Настроить как одностраничное приложение? "
Введите y и нажмите клавишу ВВОД.
Файл index.html уже существует. Перезаписать?
Введите n (важно!) И нажмите клавишу ВВОД.
Изменить некоторые файлы ...
В firebase.json замените "destination": "/index.html" на "function": "ssr"
(ssr указывает на эту переменную export const ssr = functions.https.onRequest(universal);, вы найдете ее ниже).
В server.ts добавить export к инициализации app: export const app = express(); вместо const app = express();
В server.ts либо закомментируйте последние три строки (app.listen(...)), либо замените их следующими:
// If we're not in the Cloud Functions environment, spin up a Node server
if (!process.env.FUNCTION_NAME) {
// Start up the Node server
app.listen(PORT, () => {
console.log(`Node Express server listening on http://localhost:${PORT}`);
});
}
Вы можете удалить их при развертывании в Firebase, но вам нужноих при запуске npm run serve:ssr, чтобы иметь возможность разместить ваше приложение на localhost.
- В webpack.server.config.js изменить
output следующим образом:
output: {
// Puts the output at the root of the dist folder
path: path.join(__dirname, 'dist'),
// Export a UMD of the webpacked server.ts & dependencies for rendering in Cloud Functions
library: 'app',
libraryTarget: 'umd',
filename: '[name].js',
},
и изменить externals следующим образом:
externals: [
// Firebase has some troubles being webpacked when it's in the Node environment, so we will skip it.
/^firebase/
],
Это исправит ошибку:
Невозможнонайти модуль 'require ("./ server / main")'
при выполнении команд npm run serve:ssr или firebase serve.
Перестройте приложение, запустив npm run build:ssr.
С помощью терминала перейдите в папку функций: cd functions
Установите пакет npm для доступа к файловой системе: npm i fs-extra
Внутри папки functions создайте новый файл с именем copy-angular-app.js , с этим содержанием:
const fs = require('fs-extra');
fs.copy('../dist', './dist').then(() => {
// We should remove the original "index.html" since Firebase will use it when SSR is enabled (instead of calling SSR functions),
// and because of that, SSR won't work for the initial page.
fs.remove('../dist/browser/index.html').catch(e => console.error('REMOVE ERROR: ', e));
}).catch(err => {
console.error('COPY ERROR: ', err)
});
Это исправляет начальную страницу, не загруженную как SSR (вместо отображения содержимого для начальной страницы этопо-прежнему показывает <app-root></app-root>).
Примечание: Поскольку мы удалили файл index.html, запуск npm run serve:ssr не будет работать, если вы сначала не перестроите свое приложение (запустив npm run build:ssr -> это создаст файл index.html).
- В functions / package.json (не в package.json проекта!) измените сборкувведите следующую запись:
"build": "node copy-angular-app && tsc",
- В functions / src / index.ts замените содержимое следующим:
import * as functions from 'firebase-functions';
const universal = require(`${process.cwd()}/dist/server`).app;
export const ssr = functions.https.onRequest(universal);
- В терминале маУбедитесь, что вы находитесь в каталоге functions и там запускаете
npm run build, чтобы скопировать папку dist в папку functions.
Дополнительное примечание: Чтобы упростить сборку для Firebase, вы можете создать скрипт в файле package.json основного проекта:
"build:ssr": "npm run build:client-and-server-bundles && npm run compile:server", // this one should already exist
"build:ssr-firebase": "npm run build:ssr && npm --prefix functions/ run build",
Этот скрипт будетсначала создайте приложение Angular SSR (npm run build:ssr), а затем оно будет запускаться npm run build в папке functions (таким образом, оно скопирует папку dist проекта в ваши functions dist и удалит файл проекта index.html).
Развертывание приложения ...
Вы можете обслуживать свое приложение локально перед развертыванием в localhost: 5000 , запустив firebase serve (если хотите).
Остановите сервер (Ctrl + C).
Затем вы можете развернуть приложение, запустив firebase deploy и перейти к нему через URL, который отображается в терминале.
Таким образом, мне удалось развернуть мое приложение Angular SSR наFirebase.
Надеюсь, это поможет ...