(GSR)Git clone ～ Nuxt 編集 ～ デプロイ 一連の操作

2022.08.31

GCP Source Repositoriesから

  1. Gitでプロジェクトをclone
  2. Nuxtプロジェクトを編集
  3. 本番環境へのデプロイとプロジェクトの変更をGit へ push

の一連の操作方法をお伝えします。

※ 既に以下をインストールしていることを前提とします。

  • Google Cloud SDK
  • Git
  • Node.js
    npm, yarn
  • Firebase tools
  • Visual Studio Code (VSCode)

Gitでプロジェクトをclone

  1. Windows Terminal または PowerShellを起動し、任意のプロジェクトに移動します。
    この例ではD:\devsを使用します。

  2. Google Cloud SDKを使用するユーザーを設定します。
    gcloud auth loginコマンドを実行します。

  3. 2.で表示されたURLにアクセスし、ブラウザでログイン処理を行います。

  4. ターミナルに戻り、Google Cloud SDKで使用するプロジェクトを設定します。
    gcoud config set project [プロジェクトID]を実行します。

  5. ブラウザを起動し、Source Repositoriesに移動します。

  6. 任意のリポジトリにアクセスします。
    この例ではdigitak-town-site-memberを使用します。
    画面右上の「クローンを作成」ボタンをクリックします。

  7. 「SSH認証」を「Google Cloud SDK」に変更し、その下のコマンドをコピーします。

  8. ターミナルに戻り、コピーしたコマンドを実行します。

  9. 8でcloneしたプロジェクトディレクトリをVSCodeで開きます。
    code {ディレクトリパス}を実行すると、指定したディレクトリでVSCodeが開きます。

プロジェクトの初期構築

cloneしたばかりのNuxtプロジェクトでは、運用上必要なモジュールや設定ファイル等が省かれた状態です。そのため、初期段階ではNode.jsのコマンドを使用してモジュールのインストールや、.env等の設定ファイルを作成する必要があります。
以下ではその手順を説明します。

  1. VSCode上でターミナルを使用するため、ターミナルを起動します。
    ショートカットキーCtrl+Shift+@を実行してください。
  1. Nodeモジュールのインストール
    ターミナルでyarn installコマンドを実行し、必要なJSモジュールをインストールします。
    package.jsonファイルに記載されたモジュールがインストールされます。
  1. ターミナルでfirebase authを実行し、Firebaseプロジェクトにログインします。
    URLが表示されますので、Google Cloud SDKログインと同様の操作を行ってください。
  1. 以下の画像のようなページが表示されたらログイン完了です。
    VSCodeに戻ってください。
  1. 設定ファイルを作成します。
    今回の例では.env.sampleファイルが存在するので、同じディレクトリ階層にコピペし、ファイル名を.envにリネームします。
  1. これで下準備が完了したので、ローカルサーバを立てて動作を検証します。
    ターミナルでyarn devコマンドを実行してください。
  1. 正常に起動したらhttp://localhost:3000と表示されます。これで起動完了です。
    実際にアクセスし、動作を確認してください。
  2. vueファイルのソースコードは、基本的にcomponents、layouts、pagesに存在します。
    componentsは、ページによって個別に使用されるコンポーネントです。
    layoutsは、プロジェクト全体で共通して使用されるコンポーネント(枠)です。
    pagesはVueRouterによるルーティングによって表示されるページです。

本番環境へデプロイ

  1. ターミナルでショートカットキーCtrl+Cを押してローカルサーバを停止します。
    「バッチ ジョブを終了しますか？ (Y/N)」と出たら、Yを入力後Enterキーを押して終了します。
  1. yarn generateコマンドで、Nuxt.jsプロジェクトを静的ページ用にトランスパイルします。
  1. firebase deploy --only hostingコマンドで、トランスパイルしたプロジェクトファイルをFirebase Hostingにデプロイします。
  2. Source Repositoriesにあるリポジトリに、変更を更新します。
    gitコマンドを使用しますので、覚えてください。

さいごに

いかがでしたか？
これでとりあえずはプロジェクトのclone(Git)、本番環境へのデプロイ(Firebase)、変更をpush(Git)の流れは掴めましたでしょうか？
今回の例に挙げたプロジェクトのセルフホスティングサービスはFirebase Hostingを使用したものでしたが、他にもVercelやNetlify等があります。それぞれのサービスに合わせたCLIツールも存在しますので、適宜プロジェクトに合わせた環境の構築をした上で修正等を行ってください。

スポンサーリンク

コメント