SPA な Web アプリを継続的デリバリーする環境を作る 〜 序章編

概要

SPA な Web アプリを GitLab で自動テスト、自動デプロイする環境を作っていくよ。 構成的にはざっくりとこんな感じ。

GitLabCI/CD自動デプロイまでの構成

ちょっと長くなりそうなので4部構成でお届けする。

• SPA な Web アプリを継続的デリバリーする環境を作る (1) 〜 バックエンド（ Laravel ）編
• SPA な Web アプリを継続的デリバリーする環境を作る (2) 〜 フロントエンド（ Vue.js ）編
• SPA な Web アプリを継続的デリバリーする環境を作る (3) 〜 インフラ（ AWS ）編
• SPA な Web アプリを継続的デリバリーする環境を作る (4) 〜 継続的デリバリー（ GitLab CI/CD ）編

目的

それっぽいことを書いておく。

• Laravel でプロジェクトの立ち上げから開発までの流れを学ぶ
• Vue.js でプロジェクトの立ち上げから開発までの流れを学ぶ
• AWS で最低限の構成でインフラを構築する方法を学ぶ
• GitLab CI/CD を使ってバックエンド、フロントエンドの自動デプロイをする方法を学ぶ

使用技術

こんな技術使うよ。

• Laravel ：バックエンド
• Vue.js ：フロントエンド
• Docker ：ローカル開発環境用
• AWS ：デプロイ環境
  • EC2 ：バックエンド動作環境（ Amazon Linux 2 使う ）
    • nginx ：Webサーバ
    • php-fpm ：APPサーバ（ PHP7.3 使う）
  • S3 ：フロントエンド動作環境
• GitLab CI/CD ：バージョン管理、CI/CD 実行環境

ハンズオンの前に

GitLab にバックエンドとフロントエンドのリポジトリを作成する。 アクセス設定は Private にすると少し面倒になるので全部 Public にする。 大切な情報をリポジトリに間違って入れたりしないよう気をつけてね。

• バックエンド用リポジトリ
  • リポジトリ名： app-backend
  • アクセス設定：Public
• フロントエンド用リポジトリ
  • リポジトリ名： app-frontend
  • アクセス設定：Public

おわりに

元々は社内の勉強会で使用した内容だったけど、このまま放置するのは勿体ないので公開することにした。 役に立ててね。