LoginSignup
0

More than 1 year has passed since last update.

AngularExpressをdocker利用する

Posted at

Angular Express を docker利用 する

table of contents

  1. dockerfile を作成する
  2. docker-compose.yaml を作成する
  3. server.ts を編集する

Pre Build

Qiitaの環境を利用しています。

環境は以下。

環境

Package Version
@angular-devkit/architect 0.1303.8
@angular-devkit/build-angular 13.3.8
@angular-devkit/core 13.3.8
@angular-devkit/schematics 13.3.8
@angular/cli 13.3.8
@nguniversal/builders 13.1.1
@nguniversal/express-engine 13.1.1
@schematics/angular 13.3.8
rxjs 6.6.7
typescript 4.6.4

1. dockerfile を作成する

docker を利用するためのDockerfileを作成します。
image は node:alpine16 系を利用想定として初めて行きます。

1-1. 下準備

node_modulesは OS 依存の package があった場合に扱いがすごくだるくなるため、volumeに追加します。(build の成果物とかもやった方がいいですがとりあえず動くように。。。)

% rm -rf node_modules

1-2. dockerfile を作成する

% touch dockerfile
% code ./dockerfile

基本的にnodejs officialを利用してコードを整理していきます。

FROM node:16-alpine as local # targetを利用してproductionの時と書き分ける

ENV ROOT=/usr/src/app # 完全にのり

WORKDIR ${ROOT}

RUN apk update && apk upgrade --available

COPY package*.json .
RUN npm install
COPY . .

CMD [ "npm", "run", "dev:ssr" ] # local開発専用の位置付けなので、コマンド自体も `npm run dev:ssr`で対応を実施

2. docker-compose.yaml を作成する

docker-compose.yaml
version: '3.9'
services:
  client:
    container_name: client # つけておいた方がのちのち楽
    build:
      context: .
      dockerfile: ./dockerfile
      target: local # targetを利用して対応
    tty: true
    restart: "always"
    ports:
      - "4200:4200"
    working_dir: /usr/src/app
    volumes:
      - ".:/usr/src/app"
      - clientdependency:/usr/src/app/node_modules

volumes:
  clientdependency: {} # node_modules用のvolumeを追加

一応docker compose upで動くのですが、画面には rendering されません。。。

% docker compose up --build

3. server.ts を編集する

上記完了後に、server.tsに HOST と PORT についての記載を追加します。

server.ts
# line: 51
function run(): void {
  const port = process.env['PORT'] || 4000;

  // Start up the Node server
  const server = app();
  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}

HOST の規定がない + port が numberではないので、追記

server.ts
function run(): void {
  const port = Number(process.env['PORT']);
  const PORT = Number.isNaN(port) ? 4000 : port;
  const HOST = '0.0.0.0';

  // Start up the Node server
  const server = app();
  server.listen(PORT, HOST, () => {
    console.log(`Node Express server listening on http://${HOST}:${PORT}`);
  });
}

以上の設定が完了したら、起動します。

% docker compose up --build

localhost:4200view-sourceを利用して起動が完了したことと SSR で build されているかを確認します。

sample-ssr.png

スクリーンショット 2022-06-19 23.40.11.png

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0