リポジトリ管理しているAmplifyアプリの複製

現在、チャーシューを仕込んでいます。
味が染み込むまでに時間がかかりますので、備忘として記載します。

今回、私が行いたい作業としては、「Amplifyアプリを複製すること」です。
類似したアプリケーションを新規作成する際や、旧環境と新環境での同時並行稼働に対応するための1つの解決策として、Amplify(その他リソース含め)をコピー新規できるのではと思った次第です。

前提

• 既存のソースコードは、GitLabでリポジトリを管理している
  • そのリポジトリ内にAmplifyの設定ファイル等(amplifyフォルダ内)が格納されている
• Amplifyのホスティング方法としては、「S3 + CloudFront」でamplify-cliを利用して公開
• フロントエンドのフレームワークはreact
  • 挙動を確認したかっただけなので、backendは特に追加なし

概要

• GitLabの既存プロジェクトAをコピーして、新規プロジェクトBを作成する
  • GitLabA --"コピー"--> GitLabB
• 既存プロジェクトAのAmplifyは残したまま、新規プロジェクトBを公開したい
  • AmplifyA --"コピー"--> AmplifyB
• GitLabAに紐づくのはAmplifyAとなっている
• GitLabBに紐づくのはAmplifyBとしたい

障壁・不安要素としては、既存プロジェクトのamplifyフォルダがどうなるのか....

実際の作業に移ります。

以下、
product_a : 既存リソース
product_b : 新規リソース

GitLabのコピー作業

こちらの記事を参考に作業を行いました(参考)

コピー元のプロジェクトに.gitlab-ci.ymlなどが存在する場合は注意してください。pushするタイミングでパイプラインが稼働します。

1. 既存プロジェクトをcloneし、新規プロジェクトを作成します。git clone https://XXX [新しいプロジェクト名]で新規プロジェクトをローカルに作成できるようです

   myname:~/environment/individual-gitlab $ ls
   product_a
   myname:~/environment/individual-gitlab $ git clone https://gitlab.com/XXXXX/product_a.git product_b
   XXXXX
   myname:~/environment/individual-gitlab $ ls
   product_a  product_b
   

2. 既存のプロジェクトをローカルに反映しましたが、この状態だとgitとの通信部分は、既存プロジェクトに向いている状態のようです。

   myname:~/environment/individual-gitlab/product_b (main) $ git remote -v
   origin  https://gitlab.com/XXXXX/product_a.git (fetch)
   origin  https://gitlab.com/XXXXX/product_a.git (push)
   

3. 向き先を変更するため、画面上より新規プロジェクトを作成します。「リポジトリを初期化しREADMEを生成する」をチェックすると、厄介になりそうだったので、とりあえずチェックは外しておきます。
   

4. リモートの設定を変更するため、git remote set-url origin XXXXXのXXXXX部分に新規作成したプロジェクトのgitのURLを追加します

   myname:~/environment/individual-gitlab/product_b (main) $ git remote set-url origin 
   https://gitlab.com/XXXXX/product_b.git
   

5. 設定を確認します

   myname:~/environment/individual-gitlab/product_b (main) $ git remote -v
   origin  https://gitlab.com/XXXXX/product_b.git (fetch)
   origin  https://gitlab.com/XXXXX/product_b.git (push)
   

6. ローカルの情報をリモートに反映させれば完了

   myname:~/environment/individual-gitlab/product_b (main) $ git push origin --all
   

Amplifyの複製

結論として、新規プロジェクト内のamplifyフォルダを削除し、amplifyの設定を一から行いました。ここまで引っ張ってしまい、申し訳ありません。
(amplify initでプロジェクト名を変えていれば、新規作成されてたのかな・・・ご存知の方ご教示ください。)

1. 新規プロジェクト内のamplifyフォルダを消す。(rm -rf XXXはディレクトリの強制削除ですので、注意してください)

   myname:~/environment/individual-gitlab/product_b (test) $ cd b_dir/
   myname:~/environment/individual-gitlab/product_b/b_dir (test) $ rm -rf amplify/
   myname:~/environment/individual-gitlab/product_b/b_dir (test) $ ls
   package.json  package-lock.json  public  README.md  scripts  src
   

2. amplifyの初期設定を行います。キャッシュ？履歴？なところで、一番最初の? Enter a name for the project(XXXXX)　の質問で依然のプロジェクト名が出てきましたが、自分で入力することで上書きは回避されそう・・？

   myname:~/environment/individual-gitlab/product_b/b_dir (test) $ amplify init
   Note: It is recommended to run this command from the root of your app directory
   ? Enter a name for the project productB
   The following configuration will be applied:
   Project information
   | Name: productB
   | Environment: dev
   | Default editor: Visual Studio Code
   | App type: javascript
   | Javascript framework: react
   | Source Directory Path: src
   | Distribution Directory Path: build
   | Build Command: npm run-script build
   | Start Command: npm run-script start
   ? Initialize the project with the above configuration? Yes
   Using default provider  awscloudformation
   ? Select the authentication method you want to use: AWS profile
   For more information on AWS Profiles, see:
   https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html
   ? Please choose the profile you want to use XXXXXXXX
   

3. initを行うことで、cloudformationが動きアプリが作成され、画面上でも確認ができるようになりました。(※この時点では、CloudFrontは作成されていない)
   
   (載せるのに適していなかったため加工しています。。。)

4. amplify add hostingでホスティング情報の追加(※この時点でも、CloudFrontは作成されていない)

   myname:~/environment/individual-gitlab/product_b/b_dir (test) $ amplify add hosting
   ? Select the plugin module to execute Amazon CloudFront and S3
   ? Select the environment setup: PROD (S3 with CloudFront using HTTPS)
   ? hosting bucket name XXXXXXXXX(S3バケット)
   Static webhosting is disabled for the hosting bucket when CloudFront Distribution is enabled.
   You can now publish your app using the following command:
   Command: amplify publish
   

5. amplify publishで公開。CloudFrontのディストリビューションが新規で作成され、既存のリソース(product_a)に影響なく公開することが出来ました。
   
   

時間があれば新規作成してみたproduct_bに色々と手を加えてみます。
チャーシューが煮込まれたので、この辺でドロンです