カテゴリー
【Angular12対応】Angular UniversalでSSR入門〜Webサイト構築
※ 当ページには【広告/PR】を含む場合があります。
2021/08/07
2022/08/10
Angular CLIのインストール
npm init
{
"name": "ng_ssr_test",
"version": "0.0.1",
"private": true,
"license": "UNLICENSED"
}
$ yarn add @angular/cli -S
$./node_modules/.bin/ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 12.2.0
Node: 12.16.3
Package Manager: yarn 1.22.4
OS: linux x64
Angular: undefined
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.1202.0
@angular-devkit/core 12.2.0
@angular-devkit/schematics 12.2.0
@angular/cli 12.2.0
@schematics/angular 12.2.0
angular cli v12.2いつものAngularプロジェクトを作成
ng
{
...
"scripts": {
"ng": "ng"
},
...
ng new
$ yarn ng new SSRWebApp
? Would you like to add Angular routing? > Yes
? Which stylesheet format would you like to use? > SCSS
$ cd SSRWebApp && tree -L 3 -I node_modules
.
├── README.md
├── angular.json
├── karma.conf.js
├── package.json
├── src
│ ├── app
│ │ ├── app-routing.module.ts
│ │ ├── app.component.html
│ │ ├── app.component.scss
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ └── app.module.ts
│ ├── assets
│ ├── environments
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.scss
│ └── test.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
└── yarn.lock
SSRWebAppAngular Universalのインストール
@nguniversal/express-engine
main.server.ts
app.server.module.ts
tsconfig.server.json
server.ts
$ yarn ng add @nguniversal/express-engine
package.json
{
"name": "ssrweb-app",
"version": "0.0.0",
"scripts": {
...
"dev:ssr": "ng run SSRWebApp:serve-ssr",
"serve:ssr": "node dist/SSRWebApp/server/main.js",
"build:ssr": "ng build && ng run SSRWebApp:server",
"prerender": "ng run SSRWebApp:prerender"
},
...
Universalアプリケーションの開発方法
$ yarn dev:ssr
http://localhost:4200
プロダクションビルドとローカルテスト
$ yarn build:ssr
dist
$ tree -I node_modules dist
dist
└── SSRWebApp
├── browser
│ ├── 3rdpartylicenses.txt
│ ├── favicon.ico
│ ├── index.html
│ ├── main.cedae7bdc85724a6aff2.js
│ ├── polyfills.63df66e961fda97a353b.js
│ ├── runtime.0da0be094e5c75c071d3.js
│ └── styles.31d6cfe0d16ae931b73c.css
└── server
├── 3rdpartylicenses.txt
└── main.js
SSRWebAppbrowserserver
$ yarn serve:ssr
...
Node Express server listening on http://localhost:4000
http://localhost:4000browser
servermain.js開発後にSSRウェブサイトを公開するには
まとめ
参考サイト
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー