はじめに
以前WSlでも環境構築したのだが、wslだといろいろと例外が出たりして結構不便なのでちゃんとデスクトップのUbuntuに入れることにした。GitHubPagesで公開するところまでやる。
環境構築
こちらの記事[1][2]を参考にしました。
curlコマンドでnodebrewの準備。コマンドがなかったらインストール。
curl -L git.io/nodebrew | perl - setup
終わったらパスを通して更新。
export PATH=$HOME/.nodebrew/current/bin:$PATH
インストールしてバージョンの確認。２０２１年６月２５日現在の最新LTSバージョンはv14.17.1なのでそれをインストールしてバージョンの確認。
nodebrew install v14.17.1
nodebrew use latest
nodebrew ls
yarnのインストール。
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
apt-key list
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update
sudo apt install --no-install-recommends yarn
dpkg -L yarn
パスとバージョンの確認。
which yarn
yarn --version
create-react-appのインストール。
yarn global add create-react-app
パスを通して更新。
export PATH=$HOME/.yarn/bin:$PATH
whichコマンドでパスが表示できたらいけてます。
プロジェクトディレクトリの作成。ここではreactportfolioとしています。
create-react-app --template typescript reactportfolio
本当はキャメルケースにしたかったのですが、無理だったのでプロジェクトディレクトリ作成後にプロジェクトディレクトリ名をreactPortfolioに変更しておきました。プロジェクトディレクトリに移動してアプリケーションを実行して動作確認。ちゃんと動けば問題ないです。
yarn start
ここからは好みなのですが無駄なファイルを消して最小限のファイルでhelloworldを表示させます。typescriptにしたからかわかりませんが見慣れないファイルがあるので気になったファイルだけ調べてみます。
reportWebVitals.ts
こちらの記事[3]によるとWebVitalsという計測ライブラリらしい。
App.test.tsx
なんかリンク先に文字を返しているんでしょうか。
setupTest.ts
よくわからないですがなんかimportしてます
react-app-env.d.ts
こちらの記事[4]によるとパッケージの依存関係などの設定が書いてあるようです。import/exportがあるので不要？
消しても戻せそうなのでindex.tsx,App.tsx,index.html以外のpublicとsrcディレクトリ内のファイルは全部消します。残ったファイルの不要な部分は消します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>Hello,World</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
import React from 'react';
import ReactDOM from 'react-dom';
import {App} from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
export function App (){
return (
<div>Hello,world</div>
);
};
こちらの記事[5]を読んでdefault exportは辞めておきました。yarn startでhelloworldが出力されるはずです。
ここからこのソースをGitHubPagesで公開していきます。GitとGithubPagesはある程度知ってる前提で進めます。まずは必要なものをダウンロードします。
yarn add --dev gh-pages
package.jsonにhomepageとdeploy、predeployを追加します。詳しくはこちら[6]。
{
"homepage": "https://it-tsumugi.github.io/reactPortfolio",
"name": "reactportfolio",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"predeploy": "yarn build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^3.2.3"
}
}
あとはgithubpagesの設定をしてあるリポジトリにpushしたあと
yarn deploy
でデプロイ。リポジトリのsettingからsourceをgh-pagesに変更すれば見れる。
おわりに
いい加減環境構築に飽きたのでちゃんとポートフォリオ作りたい。
参考文献
[1]:WSLでReactを使ってHello Worldしてみた
[2]:yarnのインストール - Ubuntu
[3]:CreateReactAppにWebVitals計測ライブラリが入ったので試してみた
[4]:next-env.d.tsの意味
[5]:なぜ default export を使うべきではないのか？
[6]:GitHub Pages で最小構成のreactのhelloworldをデプロイしてみた