AngularアプリをCloudflare Pagesでホスティングする手順

2023-06-03

静的なファイルをホスティングする際には、色々と選択肢がありますが、私はCloudflareが好きなので、Cloudflare Pagesを利用しています。

そのため、タイトルの通り、AngularアプリをCloudflare Pagesでホスティングする手順を自分用のメモとして記録しておきます。

間違いがあれば、コメント頂ければと思います。

環境

名称	バージョンなど
OS	macOS Monterey 12.6.6
node	18.14.2
Angular	16.0.2

前提

Angular CLIをインストールしていること。

リポジトリなど

手順(作業記録)

GitHubでリポジトリを作成する

リポジトリをクローンする

1ghq get [email protected]:teruhirokomaki/angular-cloudflare-iemie3.git

1cd ~/go/src/github.com/teruhirokomaki/angular-cloudflare-iemie3
2(ins) teruhiro:~/go/src/github.com/teruhirokomaki/angular-cloudflare-iemie3 $ ls -la
3total 8
4drwxr-xr-x   4 teruhiro  staff   128 Jun  3 04:49 .
5drwxr-xr-x  38 teruhiro  staff  1216 Jun  3 04:41 ..
6drwxr-xr-x  12 teruhiro  staff   384 Jun  3 04:41 .git
7-rw-r--r--   1 teruhiro  staff    27 Jun  3 04:41 README.md

Angularのワークスペースを作成する

Angular 日本語ドキュメンテーション - ng new
ワークスペースを作成します。
- ng new my-app --standalone --skip-git

 1(ins) teruhiro:~/go/src/github.com/teruhirokomaki/angular-cloudflare-iemie3 $ ng new my-app --standalone --skip-git
 2? Would you like to add Angular routing? Yes
 3? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
 4            Standalone application structure is new and not yet supported by many existing 'ng add' and 'ng update' integrations with community libraries.
 5CREATE my-app/README.md (1059 bytes)
 6CREATE my-app/.editorconfig (274 bytes)
 7CREATE my-app/.gitignore (548 bytes)
 8CREATE my-app/angular.json (3065 bytes)
 9CREATE my-app/package.json (1037 bytes)
10CREATE my-app/tsconfig.json (901 bytes)
11CREATE my-app/tsconfig.app.json (263 bytes)
12CREATE my-app/tsconfig.spec.json (273 bytes)
13CREATE my-app/.vscode/extensions.json (130 bytes)
14CREATE my-app/.vscode/launch.json (470 bytes)
15CREATE my-app/.vscode/tasks.json (938 bytes)
16CREATE my-app/src/main.ts (250 bytes)
17CREATE my-app/src/favicon.ico (948 bytes)
18CREATE my-app/src/index.html (291 bytes)
19CREATE my-app/src/styles.scss (80 bytes)
20CREATE my-app/src/app/app.component.scss (0 bytes)
21CREATE my-app/src/app/app.component.html (23115 bytes)
22CREATE my-app/src/app/app.component.spec.ts (888 bytes)
23CREATE my-app/src/app/app.component.ts (368 bytes)
24CREATE my-app/src/app/app.config.ts (228 bytes)
25CREATE my-app/src/app/app.routes.ts (77 bytes)
26CREATE my-app/src/assets/.gitkeep (0 bytes)
27✔ Packages installed successfully.

ワークスペースを確認する

 1(ins) teruhiro:~/go/src/github.com/teruhirokomaki/angular-cloudflare-iemie3 $ cd my-app/
 2(ins) teruhiro:~/go/src/github.com/teruhirokomaki/angular-cloudflare-iemie3/my-app $ ls -la
 3total 936
 4drwxr-xr-x   14 teruhiro  staff     448 Jun  3 04:49 .
 5drwxr-xr-x    5 teruhiro  staff     160 Jun  3 04:49 ..
 6-rw-r--r--    1 teruhiro  staff     274 Jun  3 04:49 .editorconfig
 7-rw-r--r--    1 teruhiro  staff     548 Jun  3 04:49 .gitignore
 8drwxr-xr-x    5 teruhiro  staff     160 Jun  3 04:49 .vscode
 9-rw-r--r--    1 teruhiro  staff    1059 Jun  3 04:49 README.md
10-rw-r--r--    1 teruhiro  staff    3065 Jun  3 04:49 angular.json
11drwxr-xr-x  573 teruhiro  staff   18336 Jun  3 04:49 node_modules
12-rw-r--r--    1 teruhiro  staff  445654 Jun  3 04:49 package-lock.json
13-rw-r--r--    1 teruhiro  staff    1037 Jun  3 04:49 package.json
14drwxr-xr-x    8 teruhiro  staff     256 Jun  3 04:49 src
15-rw-r--r--    1 teruhiro  staff     263 Jun  3 04:49 tsconfig.app.json
16-rw-r--r--    1 teruhiro  staff     901 Jun  3 04:49 tsconfig.json
17-rw-r--r--    1 teruhiro  staff     273 Jun  3 04:49 tsconfig.spec.json

`environment.ts`ファイルを作成する

Angular - Building and serving Angular apps
Angular 15 CLI does not create environments folder when creating an angular project via ng new - Stack Overflow
environmentを作成します。
- ng g environments

1(ins) teruhiro:~/go/src/github.com/teruhirokomaki/angular-cloudflare-iemie3/my-app $ ng g environments
2CREATE src/environments/environment.ts (31 bytes)
3CREATE src/environments/environment.development.ts (31 bytes)
4UPDATE angular.json (3290 bytes)

`.nvmrc`ファイルを作成する

Cloudflareでビルドする際に、nodeのバージョンを指定するため、.nvmrcファイルを作成します。
- node -v > .nvmrc

1(ins) teruhiro:~/go/src/github.com/teruhirokomaki/angular-cloudflare-iemie3/my-app $ echo "v18.14.0" > .nvmrc
2(ins) teruhiro:~/go/src/github.com/teruhirokomaki/angular-cloudflare-iemie3/my-app $ cat .nvmrc 
3v18.14.0

もしくは…

1(ins) teruhiro:~/go/src/github.com/teruhirokomaki/angular-cloudflare-iemie3/my-app $ node -v > .nvmrc
2(ins) teruhiro:~/go/src/github.com/teruhirokomaki/angular-cloudflare-iemie3/my-app $ cat .nvmrc 
3v18.14.2

`ng serve`して確認する

 1/Users/teruhiro/.n/bin/npm run start
 2
 3> [email protected] start
 4> ng serve
 5
 6✔ Browser application bundle generation complete.
 7
 8Initial Chunk Files   | Names         |  Raw Size
 9vendor.js             | vendor        |   2.26 MB | 
10polyfills.js          | polyfills     | 328.93 kB | 
11styles.css, styles.js | styles        | 226.83 kB | 
12main.js               | main          |  46.29 kB | 
13runtime.js            | runtime       |   6.51 kB | 
14
15                      | Initial Total |   2.86 MB
16
17Build at: 2023-06-02T20:40:40.859Z - Hash: df110a776fdfceac - Time: 1335ms
18
19** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
20
21
22✔ Compiled successfully.

`ng build`して確認する

 1/Users/teruhiro/.n/bin/npm run build
 2
 3> [email protected] build
 4> ng build
 5
 6✔ Browser application bundle generation complete.
 7✔ Copying assets complete.
 8✔ Index html generation complete.
 9
10Initial Chunk Files           | Names         |  Raw Size | Estimated Transfer Size
11main.51718165e0e5f094.js      | main          | 189.02 kB |                52.45 kB
12polyfills.4aecfb127e78c0d2.js | polyfills     |  32.98 kB |                10.64 kB
13runtime.771c5fa6dd11d129.js   | runtime       | 890 bytes |               510 bytes
14styles.ef46db3751d8e999.css   | styles        |   0 bytes |                       -
15
16                              | Initial Total | 222.88 kB |                63.59 kB
17
18Build at: 2023-06-02T20:41:21.238Z - Hash: e0b52fb5329453f9 - Time: 1492ms
19
20Process finished with exit code 0