search
LoginSignup
0
Help us understand the problem. What are the problem?

posted at

AngularExpressをdocker利用する

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
What you can do with signing up
0
Help us understand the problem. What are the problem?