スポンサードサーチ
ディレクトリ構成
ディレクトリ構成は以下
(他にもファイルはあるがここでは省略)
.
┗━ 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-appDockerfile
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 に記載されている。