Closed16
React + Github Pages(Github Actions)
![ikura1](https://res.cloudinary.com/zenn/image/fetch/s--2v_uW54n--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/2d74a7fa0b.jpeg)
下記に使用しているコードを書く
![ikura1](https://res.cloudinary.com/zenn/image/fetch/s--2v_uW54n--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/2d74a7fa0b.jpeg)
コードはViteのデフォルトでやる
npm create vite@latest my-vue-app -- --template react-ts
![ikura1](https://res.cloudinary.com/zenn/image/fetch/s--2v_uW54n--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/2d74a7fa0b.jpeg)
Next.js
を使った方が楽をできるかも…?
Next.js用のアクションがあるらしい
![ikura1](https://res.cloudinary.com/zenn/image/fetch/s--2v_uW54n--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/2d74a7fa0b.jpeg)
Setting -> Pages に移動して
とりあえず、Github Actionsを選択
![ikura1](https://res.cloudinary.com/zenn/image/fetch/s--2v_uW54n--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/2d74a7fa0b.jpeg)
推薦されているActionにReact専用のものではなく、jekyllと静的ページのものでした
jekyllについてはよくわからんけど、静的サイト生成機らしい
![ikura1](https://res.cloudinary.com/zenn/image/fetch/s--2v_uW54n--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/2d74a7fa0b.jpeg)
Static HTML
の設定を開き拡張して使うことにします。
そのために、Github Actionsでのbuild方法を調べます
![ikura1](https://res.cloudinary.com/zenn/image/fetch/s--2v_uW54n--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/2d74a7fa0b.jpeg)
ジョブの詳細を見るに、js自体はアップロードされていた
![ikura1](https://res.cloudinary.com/zenn/image/fetch/s--2v_uW54n--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/2d74a7fa0b.jpeg)
つまりviteの設定で参照できていないだけだった
![ikura1](https://res.cloudinary.com/zenn/image/fetch/s--2v_uW54n--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/2d74a7fa0b.jpeg)
下記を設定することで表示することができた。アイコン以外
vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
base: "./",
});
![ikura1](https://res.cloudinary.com/zenn/image/fetch/s--2v_uW54n--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/2d74a7fa0b.jpeg)
svgのアイコンを./
とすることで全部表示できた
App.tsx
<img src="./vite.svg" className="logo" alt="Vite logo" />
このスクラップは2022/11/05にクローズされました