0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

echo+Nuxt+Cypress構成をデプロイ&テスト実行できるようCodePipelineを組んだメモ

Last updated at Posted at 2023-07-19

CodePipeline 流れ図

FireShot Capture 025 - CodePipeline - AWS Developer Tools - ap-northeast-1.console.aws.amazon.com.png

ステージ

Source

ソースコードの取得
ここではBitbucket

dir構造

├── build
│   ├── go
│   │   └── Dockerfile
│   └── nuxt
├── cmd
│   └── api
│       └── main.go
├── e2e
│   ├── cypress
│   │   └── e2eテストファイル
│   ├── cypress.config.js
│   └── package.json
└── web
    └── nuxtのコード

Build

echo(Go) -> ECRにコンテナイメージをプッシュ
Nuxt -> s3にファイルをアップ

Goのビルド

ECRに登録するGoコンテナを作成する | ECS FargateでGoコンテナを起動してローリングアップデートする
↑こちらを参考に
コンパイルしたバイナリファイルと必要な静的ファイルだけを詰めたimageを作り,imageサイズを削減する

Dockerfile
FROM golang:1.20.2-alpine as build
RUN apk add --update && apk add git
RUN mkdir /go/src/app
WORKDIR /go/src/app
ENV GO111MODULE=on
COPY ./cmd/go.mod ./
RUN go mod download

ADD ./cmd /go/src/app
WORKDIR /go/src/app/api

RUN go build

# ここからECR保存用image
FROM alpine:3.10

RUN apk add --update --no-cache ca-certificates
WORKDIR /go/src/app/api/
# バイナリファイルのコピー
COPY --from=build /go/src/app/api/api /go/src/app/api/
# 静的ファイルのコピー
COPY --from=build /go/src/app/api/public/static /go/src/app/api/public/static/
ENTRYPOINT ["/go/src/app/api/api"]

deploy

ECS Fargateを使っているので、
サービス設定でBuildステージで作ったimageのコンテナを立てるように設定

e2e-test

こちらの記事が大変参考になりました
AWS CodeBuildでCypressのE2Eテストをする | DevelopersIO

CodeBuild設定

cypressの公式imageを環境に設定する
スクリーンショット 2023-07-19 11.13.22.png
詳細は公式: https://docs.cypress.io/guides/continuous-integration/aws-codebuild

buildspec.yaml
## buildspec.yml
version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: latest
  pre_build:
    commands:
      - cd e2e
      - npm install
  build:
    commands:
      - npx cypress run

まとめ

CIをCodePipelineを用いて組んだ時のポイントのみを書いていきました
各フェーズが明示的に分けて処理を考えていけるのが良かったです


弊社では、一緒に働いてくれるエンジニアを募集しています。

↓興味のある方はこちらから↓
Wantedly - スタジオアンビルト株式会社

こんなWebサービスを作っています。
マドリー
Studio Unbuilt

0
0
0

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
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?