Angular環境をCloud Build + Cloud Runで立てる

スポンサードサーチ

ディレクトリ構成

ディレクトリ構成は以下
(他にもファイルはあるがここでは省略)

.
┗━ angular-app/
      ┣━ angular.json
      ┣━ cloudbuild.yaml
      ┣━ Dockerfile
      ┣━ package.json
      ┣━ package-lock.json
      ┗━ server.json

各ファイル内容

cloudbuild.yaml

Cloud Build で用いるyamlファイル。
変数はsubstitutionsで宣言できるようです。

steps:
# Build the container image
- name: 'gcr.io/cloud-builders/docker'
  args: ['build', '-t', 'gcr.io/${PROJECT_ID}/${_SERVICE_NAME}', '.' ]
  dir: ${_DIR}
# Push the container image to Container Registry
- name: 'gcr.io/cloud-builders/docker'
  args: ['push', 'gcr.io/${PROJECT_ID}/${_SERVICE_NAME}']
  dir: ${_DIR}
# Deploy container image to Cloud Run
- name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
  entrypoint: gcloud
  args: [
    'run',
    'deploy',
    '${_SERVICE_NAME}',
    '--image', 'gcr.io/${PROJECT_ID}/${_SERVICE_NAME}',
    '--region', 'asia-northeast1',
    '--cpu', '${_CPU}',
    '--memory', '${_MEMORY}',
    '--platform', 'managed',
    '--allow-unauthenticated'
  ]
  dir: ${_DIR}
substitutions:
  _DIR: angular-app
  _CPU: '1'
  _MEMORY: 256Mi
  _SERVICE_NAME: angular-app

Dockerfile

Docker Runで用いる。
ファイルの置き場所は package.json などと同じ階層にあった方が楽かもしれない。

FROM node:14.17

WORKDIR /usr/src/app

COPY ./package.json ./
COPY ./package-lock.json ./

RUN npm install -g @angular/cli
RUN npm install

COPY . .

RUN npm run build

EXPOSE 8080

CMD ["node", "server.js"]

server.js

ExpressJSでdistディレクトリにある静的ファイルをサービスを使用して提供する。

var express = require('express');
var app = express();

app.use(express.static('dist/angular-app'));
app.get('/', function (req, res, next) {
    res.redirect('/');
});

app.listen(8080)

distディレクトリのパスは、angularのプロジェクトを作成した際に生成されるangular.json 内のoutputPath に記載されている。

参考

コメントを残す

メールアドレスが公開されることはありません。