リポジトリ管理している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のコピー作業
こちらの記事を参考に作業を行いました([参考](https://blog.dksg.jp/2017/06/git.html))  

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

1. 既存プロジェクトをcloneし、新規プロジェクトを作成します。`git clone https://XXX [新しいプロジェクト名]`で新規プロジェクトをローカルに作成できるようです
    ```console
    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との通信部分は、既存プロジェクトに向いている状態のようです。  
   ```console
   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を生成する」をチェックすると、厄介になりそうだったので、とりあえずチェックは外しておきます。  
![pic1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1412976/2515913a-589e-53f3-b17c-8006007c641b.png)

4. リモートの設定を変更するため、`git remote set-url origin XXXXX`のXXXXX部分に新規作成したプロジェクトのgitのURLを追加します
    ```console
    myname:~/environment/individual-gitlab/product_b (main) $ git remote set-url origin 
    https://gitlab.com/XXXXX/product_b.git
    ```

5. 設定を確認します
    ```console
    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. ローカルの情報をリモートに反映させれば完了
    ```console
    myname:~/environment/individual-gitlab/product_b (main) $ git push origin --all
    ```

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

1. 新規プロジェクト内のamplifyフォルダを消す。(:warning:`rm -rf XXX`はディレクトリの強制削除ですので、注意してください)
    ```console
    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)`　の質問で依然のプロジェクト名が出てきましたが、自分で入力することで上書きは回避されそう・・？  
    ```console
    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は作成されていない)
![スクリーンショット 2022-03-12 19.27.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1412976/dc963c25-8d2b-847d-e66d-23885b0f8c88.png)
(載せるのに適していなかったため加工しています。。。)  


4. `amplify add hosting`でホスティング情報の追加(※この時点でも、CloudFrontは作成されていない)
    ```console
    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`)に影響なく公開することが出来ました。  
![スクリーンショット 2022-03-12 22.26.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1412976/c4b7bad8-5ba2-5e53-0039-a1b9e2e62498.png)
![スクリーンショット 2022-03-12 22.26.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1412976/89c17c93-ff40-6bd9-a9a8-fe8b8bfa4fa3.png)



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