Vue.jsとReact.jsのプロジェクト作成から公開準備（※コーディングは含みません。）

# Vue.jsとReact.jsのプロジェクト作成から公開準備
Javascriptで使用できるフロントエンド側のフレームワーク、VueとReactのプロジェクト作成コマンドを忘れないためと、ビルドしてからの流れについての説明が見当たらず、せっかく個人開発でやってみても誰にもリリースすることがないように記す。
なお、今回はそれぞれポートフォリオをフロントエンド側でのみ、作成したという程で作成しました。

## 動作環境
- MacBook Air (Retina, 13-inch, 2018)
    - BicSur 11.3.1
    - 1.6 GHz Dual-Core Intel Core i5
    - 6 GB 2133 MHz LPDDR3
- Node.js
    - v13.8.0
    - @vue/cli 4.5.13


## 各プロジェクトの作成

### Vue.js
```terminal
vue create vue-portfolio
```

### React.js

```terminal
npx create-react-app react-portfolio
```

## インストール確認
### Vue.js

```terminal
..省略..
🎉  Successfully created project vue-portfolio.
👉  Get started with the following commands:

 $ cd vue-portfolio
 $ npm run serve
```

### React.js
```terminal
..省略..
Success! Created react-portfolio at 
XXXXXXX/react-portfolio
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-portfolio
  npm start

Happy hacking!
```

## インストール後のnpmサーバーを起動して画面の確認
### Vue.js
■実行

```terminal
cd vue-portfolio
npm run serve
```

■結果

```terminal
 DONE  Compiled successfully in 5762ms


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.10.9:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

No issues found.
```

■画像
![vue-portfolio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573960/f5467398-b39f-7ca7-b88f-48b592ab2811.png)


### React.js
■実行

```terminal
cd react-portfolio
npm start
```

■結果

```
Compiled successfully!

You can now view react-portfolio in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.10.9:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

```

■画像
![react-portfolio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573960/fcc8d5f8-1d96-120f-c449-419f22afbd52.png)


## いじる
※自分だけのポートフォリオを作成してください。
　今回はわかりやすくトップページのみ日本語に変更をしていきます。

### Vue.js

```vue:.src/views/Home.vue
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <!-- <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> -->
    <HelloWorld msg="ようこそ。あなたのVue.jsとTypeScript App"/> //上からの変更点
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src

export default defineComponent({
  name: 'Home',
  components: {
    HelloWorld
  }
})
</script>
```
![vue-change.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573960/da399a94-496a-bbe6-8394-6e8c33a82f24.png)



### React.js

```react:.src/App.js
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          {/* Edit <code>src/App.js</code> and save to reload. */}
          <code>src/App.js</code>を編集と保存して再読み込み。{/* 上の行を変更 */}
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
```

![react-change.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573960/c3633d39-4d1b-a928-4dc5-0274a6aa625d.png)


## ポートフォリオ公開準備
自分だけのポートフォリオを作成したら公開するために、ビルドを行なっていきます。

### Vue.js

- STEP1:作成したコードをビルド
    - 以下のコマンドを実行する

```terminal
npm run build
```

- STEP2:ビルド結果の確認
    - ビルド結果
    - 「.dist」配下にビルドしたファイルが作成

```terminal
 DONE  Compiled successfully in 11164ms

  File                                 Size                                                               Gzipped

  dist/js/chunk-vendors.506821c6.js    118.83 KiB                                                         42.80 KiB
  dist/js/app.67acf451.js              6.65 KiB                                                           2.39 KiB
  dist/js/about.2b8983e6.js            0.34 KiB                                                           0.26 KiB
  dist/css/app.aaf04fac.css            0.42 KiB                                                           0.26 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
```

### React.js

- STEP1:作成したコードをビルド
    - 以下のコマンドを実行する

```terminal
npm run build
```

- STEP2:ビルド結果の確認
    - ビルド結果
    - 「.build」配下にビルドしたファイルが作成

```terminal
Compiled successfully.

File sizes after gzip:

  41.34 KB  build/static/js/2.a9157932.chunk.js
  1.63 KB   build/static/js/3.4db56475.chunk.js
  1.17 KB   build/static/js/runtime-main.e0b02365.js
  631 B     build/static/js/main.5d1e222e.chunk.js
  574 B     build/static/css/main.9d5b29c0.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment
```

## 作成したものをAWS S3へアップロードしてリリース
※AWSアカウントを持っている前提で記載しております。
### 共通
[公式HP](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html)に公開方法が記載されております。
そのため掻い摘んで説明

- STEP1:S3バケットの作成
    - サービス検索ボックスより「S3」と検索
    - 右側オレンジボタンの「バケットを作成」をクリック
- STEP2:一般的な設定
    - バケット名は小文字英数字と半角記号のみで設定（※一意になるように命名）
    - AWSリージョンについては今回はデフォルトのまま（アジアパシフィック（東京）ap-northeast-1）
- STEP3:このバケットのブロックパブリックアクセス設定
    - 「パブリックアクセスをすべてブロック」のチェックを外す
    - 「パブリックアクセスのブロックをすべてオフにすると、このバケットとバケット内のオブジェクトが公開される可能性があります。」の確認にチェックを入れる
- STEP4:バケットの作成
    - 指定項目以外についてはデフォルトのまま
    - 右下の「バケットを作成」をクリック
- STEP5:静的ウェブサイトホスティング設定
    - 作成したバケットをクリック
    - プロパティタブを選択
    - 「静的ウェブサイトホスティング」の「編集」をクリック
    - 「有効にする」にチェックを入れ「ホスティングタイプ」に「静的ウェブサイトをホストする」がチェック入っていること
    - 「インデックスドキュメント」に「index.html」を入力
    - 右下の「変更の保存」をクリック
- STEP6:バケットポリシー
    - アクセス許可タブをクリック
    - バケットポリシー欄の編集をクリック
    - 以下の内容を入力し、["arn:aws:s3:::Bucket-Name/*"]部分の[Bucket-Name]をバケット名へ変更
    - 右下の「変更の保存」をクリック

```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::XXXXXXXXX/*"
            ]
        }
    ]
}
```

- STEP7:ビルドしたファイルのアップロード
    - オブジェクトタブから「アップロード」をクリック
    - 以下のファイルに対して、アップロードを行う
        - Vueの場合は「.dist」配下のファイルすべて
        - Reactの場合は「.build」配下のファイルすべて
- STEP8:外部ネットワークで確認
    - プロパティタブの「静的ウェブサイトホスティング」にある「バケットウェブサイトエンドポイント」をクリック
    - アップロードした内容が閲覧できること

以上。

## Appendix
### ?ビルドしたプログラムをすぐ見れない?
VueもReactも共通してだが、ビルドされた「index.html」についてはサブディレクトリのままでは閲覧することができない。理由はビルド時にファイル内に記載される読み込みファイルが絶対パスのドメイン直下（ルートフォルダ）で記載がされているため、初心者はAWS S3などにあげて確認するほうがよい。