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
vue create vue-portfolio
React.js
npx create-react-app react-portfolio
インストール確認
Vue.js
..省略..
🎉 Successfully created project vue-portfolio.
👉 Get started with the following commands:
$ cd vue-portfolio
$ npm run serve
React.js
..省略..
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
■実行
cd vue-portfolio
npm run serve
■結果
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.
■画像
React.js
■実行
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.
■画像
いじる
※自分だけのポートフォリオを作成してください。
今回はわかりやすくトップページのみ日本語に変更をしていきます。
Vue.js
.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>
React.js
.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;
ポートフォリオ公開準備
自分だけのポートフォリオを作成したら公開するために、ビルドを行なっていきます。
Vue.js
- STEP1:作成したコードをビルド
- 以下のコマンドを実行する
npm run build
- STEP2:ビルド結果の確認
- ビルド結果
- 「.dist」配下にビルドしたファイルが作成
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:作成したコードをビルド
- 以下のコマンドを実行する
npm run build
- STEP2:ビルド結果の確認
- ビルド結果
- 「.build」配下にビルドしたファイルが作成
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に公開方法が記載されております。
そのため掻い摘んで説明
- 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などにあげて確認するほうがよい。