{"id":38164,"date":"2023-01-11T10:09:45","date_gmt":"2023-03-22T16:47:52","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/react-vite-%e5%ba%94%e7%94%a8%e7%8e%af%e5%a2%83%e6%90%ad%e5%bb%ba%e3%80%81%e9%83%a8%e7%bd%b2%e5%a4%87%e5%bf%98%e5%bd%95\/"},"modified":"2024-04-29T09:27:39","modified_gmt":"2024-04-29T01:27:39","slug":"react-vite-%e5%ba%94%e7%94%a8%e7%8e%af%e5%a2%83%e6%90%ad%e5%bb%ba%e3%80%81%e9%83%a8%e7%bd%b2%e5%a4%87%e5%bf%98%e5%bd%95","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/react-vite-%e5%ba%94%e7%94%a8%e7%8e%af%e5%a2%83%e6%90%ad%e5%bb%ba%e3%80%81%e9%83%a8%e7%bd%b2%e5%a4%87%e5%bf%98%e5%bd%95\/","title":{"rendered":"React + Vite \u5e94\u7528\u73af\u5883\u642d\u5efa\u3001\u90e8\u7f72\u5907\u5fd8\u5f55"},"content":{"rendered":"

\u9996\u5148<\/h1>\n

\u6211\u4e2a\u4eba\u5728\u5f00\u53d1\u4e2d\u7ecf\u5e38\u4f7f\u7528React\u3002<\/p>\n

\u7136\u800c\uff0c\u7531\u4e8e\u6bcf\u6b21\u90fd\u4f1a\u95ee\u81ea\u5df1\u201c\u600e\u4e48\u6765\u521b\u5efa\u6765\u7740\uff1f\u201d\u6240\u4ee5\u4e3a\u4e86\u4eca\u540e\u4e2a\u4eba\u5f00\u53d1\u7684\u987a\u5229\u8fdb\u884c\uff0c\u6211\u5c06\u5176\u4f5c\u4e3a\u5907\u5fd8\u5f55\u7559\u4e0b\u6765\u3002<\/p>\n

\u53ea\u662f\u5217\u4e3e\u547d\u4ee4\u3001\u6587\u4ef6\u7b49\u5185\u5bb9\uff0c\u6240\u4ee5\u6ca1\u6709\u592a\u591a\u7684\u89e3\u91ca\u8bf4\u660e\u3002
\n\u8bf7\u8c05\u89e3\u3002<\/p>\n

\u521b\u5efa\u9879\u76ee<\/h1>\n

\u6267\u884c\u4e0b\u5217\u547d\u4ee4\u3002<\/p>\n

docker run --rm<\/span> -it<\/span> -v<\/span> $PWD<\/span>:\/app -w<\/span> \/app --platform<\/span>=<\/span>linux\/amd64 node:20-slim \\<\/span>\r\nsh -c<\/span> 'npm install -g npm && npm create -y vite@latest react-vite-sample -- --template react-swc-ts'<\/span>   \r\n<\/code><\/pre>\n
\u6211\u6b63\u5728\u6267\u884c\u521b\u5efaDocker\u5bb9\u5668\u5e76\u521b\u5efavite\u9879\u76ee\u7684\u547d\u4ee4\u3002
\n\u7531\u4e8e\u6211\u4f7f\u7528\u7684\u662fApple\u82af\u7247\u7684Mac\u7ec8\u7aef\uff0c\u6240\u4ee5\u6211\u52a0\u4e0a\u4e86–platform=linux\/amd64\u53c2\u6570\u3002<\/p>\n
\u8bf7\u5c06 “react-vite-sample” \u66ff\u6362\u4e3a\u4efb\u610f\u9879\u76ee\u540d\u79f0\u3002<\/p>\n
\u521b\u5efa\u4e0eDocker\u76f8\u5173\u7684\u6587\u4ef6<\/h1>\n
\u6587\u4ef6\u5939\u5c42\u6b21\u7ed3\u6784<\/h2>\n
\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30eb\u30fc\u30c8\r\n\u251c\u2500 .devcontainer\r\n|  \u2514\u2500 devcontainer.json\r\n\u251c\u2500 docker-compose.yml\r\n\u2514\u2500 Dockerfile\r\n<\/code><\/pre>\n
\u4f7f\u7528docker-compose\uff0c\u5806\u6808\u540d\u79f0\u5c06\u6210\u4e3a\u7236\u76ee\u5f55\u7684\u540d\u79f0\u3002<\/p>\n
\u8fc7\u53bb\u6211\u4eec\u5c06docker-compose.yml\u6587\u4ef6\u653e\u5728docker\u76ee\u5f55\u4e2d\uff0c\u4f46\u662f\u7531\u4e8e\u4e0e\u5176\u4ed6\u9879\u76ee\u7684\u5806\u6808\u540d\u79f0\u91cd\u590d\uff0c\u6240\u4ee5\u73b0\u5728\u6211\u4eec\u5c06\u5176\u653e\u5728\u9879\u76ee\u6839\u76ee\u5f55\u4e0b\u3002<\/p>\n
\u6587\u4ef6<\/h2>\n
{<\/span>\r\n    \"service\"<\/span>:<\/span> \"react-vite-sample\"<\/span>,<\/span>\r\n    \"dockerComposeFile\"<\/span>:<\/span> \"..\/docker-compose.yml\"<\/span>,<\/span>\r\n    \"workspaceFolder\"<\/span>:<\/span> \"\/workdir\"<\/span>,<\/span>\r\n    \"customizations\"<\/span>:<\/span> {<\/span>\r\n      \"vscode\"<\/span>:<\/span> {<\/span>\r\n        \"extensions\"<\/span>:<\/span> [<\/span>\"eamodio.gitlens\"<\/span>,<\/span> \"dbaeumer.vscode-eslint\"<\/span>,<\/span> \"esbenp.prettier-vscode\"<\/span>],<\/span>\r\n        \"settings\"<\/span>:<\/span> {<\/span>\r\n          \"prettier.configPath\"<\/span>:<\/span> \".prettierrc.json\"<\/span>,<\/span>\r\n          \"editor.defaultFormatter\"<\/span>:<\/span> \"esbenp.prettier-vscode\"<\/span>,<\/span>\r\n          \"editor.formatOnSave\"<\/span>:<\/span> true<\/span>,<\/span>\r\n          \"editor.codeActionsOnSave\"<\/span>:<\/span> {<\/span>\r\n            \"source.fixAll.eslint\"<\/span>:<\/span> true<\/span>\r\n          },<\/span>\r\n          \"editor.tabSize\"<\/span>:<\/span> 2<\/span>\r\n        }<\/span>\r\n      }<\/span>\r\n    }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
version<\/span>:<\/span> '<\/span>3.9'<\/span>\r\nservices<\/span>:<\/span>\r\n  react-vite-sample<\/span>:<\/span>\r\n    ports<\/span>:<\/span>\r\n      -<\/span> 5173:5173<\/span>\r\n    build<\/span>:<\/span>\r\n      context<\/span>:<\/span> .<\/span>\r\n      dockerfile<\/span>:<\/span> Dockerfile<\/span>\r\n    volumes<\/span>:<\/span>\r\n      -<\/span> .:\/workdir<\/span>\r\n    tty<\/span>:<\/span> true<\/span>\r\n<\/code><\/pre>\n
FROM<\/span> --platform=linux\/amd64 node:20-slim<\/span>\r\n\r\nRUN <\/span>apt-get update &&<\/span> apt-get install<\/span> -y<\/span> git vim locales-all\r\n\r\nENV<\/span> LANG ja_JP.UTF-8<\/span>\r\nENV<\/span> LANGUAGE ja_JP:ja<\/span>\r\nENV<\/span> LC_ALL ja_JP.UTF-8<\/span>\r\n\r\nWORKDIR<\/span> \/workdir<\/span>\r\n<\/code><\/pre>\n
— \u56e0\u4e3a\u7ec8\u7aef\u662f\u82f9\u679c\u7684Mac\uff0c\u6240\u4ee5\u6211\u5b89\u88c5\u4e86\u5e73\u53f0\u4e3alinux\/amd64\u3002<\/p>\n
\u901a\u8fc7\u5b89\u88c5locales-all\u5e76\u4f7f\u7528ENV\u8bbe\u7f6e\u73af\u5883\u53d8\u91cf\uff0c\u5728\u5bb9\u5668\u5185\u4f7f\u7528git\u65f6\uff0c\u53ef\u4ee5\u89e3\u51b3\u65e5\u8bed\u8f93\u5165\u5bfc\u81f4\u7684\u4e71\u7801\u95ee\u9898\u3002<\/p>\n
\u5c06\u4e0a\u8ff0\u5185\u5bb9\u653e\u7f6e\u5728\u4e0b\u9762\u7684\u547d\u4ee4\u4e2d\uff0c\u5373\u53ef\u5728\u5bb9\u5668\u5185\u8fdb\u884c\u63d0\u4ea4\u7b49\u64cd\u4f5c\uff1a\u901a\u8fc7\u8bbe\u5b9a”user.email”\u548c”user.name”\u3002<\/p>\n
git config --global<\/span> user.email <\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9>\r\ngit config --global<\/span> user.name <\u540d\u524d>\r\n<\/code><\/pre>\n
\u53e6\u5916\uff0c\u8fd8\u9700\u8981\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u6765\u5b89\u88c5\u5e93\u3002<\/p>\n
npm install<\/span>\r\n<\/code><\/pre>\n
ESLint\u548cPrettier\u7684\u914d\u7f6e<\/h1>\n
\u6587\u4ef6\u5939\u7ed3\u6784<\/h2>\n
\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30eb\u30fc\u30c8\r\n\u251c\u2500 .eslintrc.cjs\r\n\u251c\u2500 .prettier.json\r\n\u251c\u2500 tsconfig.json\r\n\u2514\u2500 vite.config.ts\r\n<\/code><\/pre>\n
\u6587\u4ef6<\/h2>\n
\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4<\/p>\n
npm install <\/span>eslint prettier @typescript-eslint\/eslint-plugin \\<\/span>\r\n@typescript-eslint\/parser eslint-config-prettier \\<\/span>\r\neslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react \\<\/span>\r\neslint-import-resolver-typescript\r\n<\/code><\/pre>\n
\u4fee\u6539 .eslintrc.cjs\u6587\u4ef6<\/p>\n
module<\/span>.<\/span>exports<\/span> =<\/span> {<\/span>\r\n  root<\/span>:<\/span> true<\/span>,<\/span>\r\n  env<\/span>:<\/span> {<\/span> browser<\/span>:<\/span> true<\/span>,<\/span> es2020<\/span>:<\/span> true<\/span> },<\/span>\r\n  extends<\/span>:<\/span> [<\/span>\r\n    '<\/span>eslint:recommended<\/span>'<\/span>,<\/span>\r\n    '<\/span>plugin:@typescript-eslint\/recommended<\/span>'<\/span>,<\/span>\r\n    '<\/span>plugin:react-hooks\/recommended<\/span>'<\/span>,<\/span>\r\n+ <\/span>  '<\/span>plugin:import\/recommended<\/span>'<\/span>,<\/span>\r\n<\/span>+ <\/span>  '<\/span>plugin:jsx-a11y\/recommended<\/span>'<\/span>,<\/span>\r\n<\/span>+ <\/span>  '<\/span>eslint-config-prettier<\/span>'<\/span>,<\/span>\r\n<\/span>  ],<\/span>\r\n  ignorePatterns<\/span>:<\/span> [<\/span>'<\/span>dist<\/span>'<\/span>,<\/span> '<\/span>.eslintrc.cjs<\/span>'<\/span>],<\/span>\r\n  parser<\/span>:<\/span> '<\/span>@typescript-eslint\/parser<\/span>'<\/span>,<\/span>\r\n  plugins<\/span>:<\/span> [<\/span>'<\/span>react-refresh<\/span>'<\/span>],<\/span>\r\n+ <\/span>settings<\/span>:<\/span> {<\/span>\r\n<\/span>+ <\/span>  react<\/span>:<\/span> {<\/span>\r\n<\/span>+ <\/span>    version<\/span>:<\/span> '<\/span>detect<\/span>'<\/span>,<\/span>\r\n<\/span>+ <\/span>  },<\/span>\r\n<\/span>+ <\/span>  '<\/span>import\/resolver<\/span>'<\/span>:<\/span> {<\/span>\r\n<\/span>+ <\/span>   typescript<\/span>:<\/span> {},<\/span>\r\n<\/span>+ <\/span>  },<\/span>\r\n<\/span>+ <\/span>},<\/span>\r\n<\/span>  rules<\/span>:<\/span> {<\/span>\r\n    '<\/span>react-refresh\/only-export-components<\/span>'<\/span>:<\/span> [<\/span>'<\/span>warn<\/span>'<\/span>,<\/span> {<\/span> allowConstantExport<\/span>:<\/span> true<\/span> }],<\/span>\r\n+ <\/span>  '<\/span>no-restricted-imports<\/span>'<\/span>:<\/span> [<\/span>'<\/span>error<\/span>'<\/span>,<\/span> {<\/span> patterns<\/span>:<\/span> [<\/span>'<\/span>.\/<\/span>'<\/span>,<\/span> '<\/span>..\/<\/span>'<\/span>]<\/span> }],<\/span>\r\n<\/span>  },<\/span>\r\n};<\/span>\r\n<\/code><\/pre>\n
\u5728\u9879\u76ee\u6587\u4ef6\u5939\u7684\u6839\u76ee\u5f55\u4e0b\u521b\u5efa\u4e00\u4e2a\u65b0\u7684.prettier.json\u6587\u4ef6\u3002<\/p>\n
{<\/span>\r\n  \"trailingComma\"<\/span>:<\/span> \"all\"<\/span>,<\/span>\r\n  \"tabWidth\"<\/span>:<\/span> 2<\/span>,<\/span>\r\n  \"semi\"<\/span>:<\/span> true<\/span>,<\/span>\r\n  \"singleQuote\"<\/span>:<\/span> true<\/span>,<\/span>\r\n  \"printWidth\"<\/span>:<\/span> 120<\/span>,<\/span>\r\n  \"bracketSpacing\"<\/span>:<\/span> true<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u6211\u4eec\u5c06\u4f7fsrc\u76ee\u5f55\u4e0b\u7684\u6587\u4ef6\u53ef\u4ee5\u901a\u8fc7@\/\u7684\u5f62\u5f0f\u8fdb\u884c\u5bfc\u5165\u3002<\/p>\n
{<\/span>\r\n  \"compilerOptions\"<\/span>:<\/span> {<\/span>\r\n    \"target\"<\/span>:<\/span> \"ES2020\"<\/span>,<\/span>\r\n    \"useDefineForClassFields\"<\/span>:<\/span> true<\/span>,<\/span>\r\n    \"lib\"<\/span>:<\/span> [<\/span>\"ES2020\"<\/span>,<\/span> \"DOM\"<\/span>,<\/span> \"DOM.Iterable\"<\/span>],<\/span>\r\n    \"module\"<\/span>:<\/span> \"ESNext\"<\/span>,<\/span>\r\n    \"skipLibCheck\"<\/span>:<\/span> true<\/span>,<\/span>\r\n\r\n    \/*<\/span> Bundler<\/span> mode<\/span> *\/<\/span>\r\n    \"moduleResolution\"<\/span>:<\/span> \"bundler\"<\/span>,<\/span>\r\n    \"allowImportingTsExtensions\"<\/span>:<\/span> true<\/span>,<\/span>\r\n    \"resolveJsonModule\"<\/span>:<\/span> true<\/span>,<\/span>\r\n    \"isolatedModules\"<\/span>:<\/span> true<\/span>,<\/span>\r\n    \"noEmit\"<\/span>:<\/span> true<\/span>,<\/span>\r\n    \"jsx\"<\/span>:<\/span> \"react-jsx\"<\/span>,<\/span>\r\n\r\n    \/*<\/span> Linting<\/span> *\/<\/span>\r\n    \"strict\"<\/span>:<\/span> true<\/span>,<\/span>\r\n    \"noUnusedLocals\"<\/span>:<\/span> true<\/span>,<\/span>\r\n    \"noUnusedParameters\"<\/span>:<\/span> true<\/span>,<\/span>\r\n    \"noFallthroughCasesInSwitch\"<\/span>:<\/span> true<\/span>,<\/span>\r\n    \r\n+<\/span>   \"baseUrl\"<\/span>:<\/span> \".\/\"<\/span>,<\/span>\r\n<\/span>+<\/span>   \"paths\"<\/span>:<\/span> {<\/span>\r\n<\/span>+<\/span>     \"@\/*\"<\/span>:<\/span> [<\/span>\"src\/*\"<\/span>]<\/span>\r\n<\/span>+<\/span>   }<\/span>\r\n<\/span>  },<\/span>\r\n  \"include\"<\/span>:<\/span> [<\/span>\"src\"<\/span>],<\/span>\r\n  \"references\"<\/span>:<\/span> [{<\/span> \"path\"<\/span>:<\/span> \".\/tsconfig.node.json\"<\/span> }]<\/span>\r\n}<\/span>\r\n\r\n<\/code><\/pre>\n
import<\/span> {<\/span> defineConfig<\/span> }<\/span> from<\/span> '<\/span>vite<\/span>'<\/span>;<\/span>\r\nimport<\/span> react<\/span> from<\/span> '<\/span>@vitejs\/plugin-react-swc<\/span>'<\/span>;<\/span>\r\n\r\n\/\/ https:\/\/vitejs.dev\/config\/<\/span>\r\nexport<\/span> default<\/span> defineConfig<\/span>({<\/span>\r\n  plugins<\/span>:<\/span> [<\/span>react<\/span>()],<\/span>\r\n+ <\/span>resolve<\/span>:<\/span> {<\/span>\r\n<\/span>+ <\/span>  alias<\/span>:<\/span> {<\/span>\r\n<\/span>+ <\/span>    '<\/span>@<\/span>'<\/span>:<\/span> '<\/span>\/src<\/span>'<\/span>,<\/span>\r\n<\/span>+ <\/span>  },<\/span>\r\n<\/span>+ <\/span>},<\/span>\r\n<\/span>});<\/span>\r\n\r\n<\/code><\/pre>\n
\u7531\u4e8e\u53d1\u751f\u9519\u8bef\uff0c\u6211\u4eec\u5c06\u4fee\u590d main.tsx \u548c App.tsx\u3002<\/p>\n
import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\nimport<\/span> ReactDOM<\/span> from<\/span> '<\/span>react-dom\/client<\/span>'<\/span>;<\/span>\r\n- <\/span>import<\/span> App<\/span> from<\/span> '<\/span>.\/App.tsx<\/span>'<\/span>;<\/span>\r\n<\/span>+ <\/span>import<\/span> App<\/span> from<\/span> '<\/span>@\/App.tsx<\/span>'<\/span>;<\/span>\r\n<\/span>- <\/span>import<\/span> '<\/span>@\/index.css<\/span>'<\/span>;<\/span>\r\n<\/span>+ <\/span>import<\/span> '<\/span>@\/index.css<\/span>'<\/span>;<\/span>\r\n<\/span>\r\nReactDOM<\/span>.<\/span>createRoot<\/span>(<\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>root<\/span>'<\/span>)<\/span>!<\/span>).<\/span>render<\/span>(<\/span>\r\n  <<\/span>React<\/span>.<\/span>StrictMode<\/span>><\/span>\r\n    <<\/span>App<\/span> \/><\/span>\r\n  <\/<\/span>React<\/span>.<\/span>StrictMode<\/span>>,<\/span>\r\n);<\/span>\r\n<\/code><\/pre>\n
import<\/span> {<\/span> useState<\/span> }<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\n- <\/span>import<\/span> reactLogo<\/span> from<\/span> '<\/span>.\/assets\/react.svg<\/span>'<\/span>;<\/span>\r\n<\/span>+ <\/span>import<\/span> reactLogo<\/span> from<\/span> '<\/span>@\/assets\/react.svg<\/span>'<\/span>;<\/span>\r\n<\/span>+ <\/span>\/\/ eslint-disable-next-line import\/no-unresolved<\/span>\r\n<\/span>import<\/span> viteLogo<\/span> from<\/span> '<\/span>\/vite.svg<\/span>'<\/span>;<\/span>\r\n- <\/span>import<\/span> '<\/span>.\/App.css<\/span>'<\/span>;<\/span>\r\n<\/span>+ <\/span>import<\/span> '<\/span>@\/App.css<\/span>'<\/span>;<\/span>\r\n<\/span>\r\nfunction<\/span> App<\/span>()<\/span> {<\/span>\r\n  const<\/span> [<\/span>count<\/span>,<\/span> setCount<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>);<\/span>\r\n\r\n  return <\/span>(<\/span>\r\n    <><\/span>\r\n      <<\/span>div<\/span>><\/span>\r\n        <<\/span>a<\/span> href<\/span>=<\/span>\"https:\/\/vitejs.dev\"<\/span> target<\/span>=<\/span>\"_blank\"<\/span>><\/span>\r\n          <<\/span>img<\/span> src<\/span>=<\/span>{<\/span>viteLogo<\/span>}<\/span> className<\/span>=<\/span>\"logo\"<\/span> alt<\/span>=<\/span>\"Vite logo\"<\/span> \/><\/span>\r\n        <\/<\/span>a<\/span>><\/span>\r\n        <<\/span>a<\/span> href<\/span>=<\/span>\"https:\/\/react.dev\"<\/span> target<\/span>=<\/span>\"_blank\"<\/span>><\/span>\r\n          <<\/span>img<\/span> src<\/span>=<\/span>{<\/span>reactLogo<\/span>}<\/span> className<\/span>=<\/span>\"logo react\"<\/span> alt<\/span>=<\/span>\"React logo\"<\/span> \/><\/span>\r\n        <\/<\/span>a<\/span>><\/span>\r\n      <\/<\/span>div<\/span>><\/span>\r\n      <<\/span>h1<\/span>><\/span>Vite + React<\/<\/span>h1<\/span>><\/span>\r\n      <<\/span>div<\/span> className<\/span>=<\/span>\"card\"<\/span>><\/span>\r\n        <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>()<\/span> =><\/span> setCount<\/span>((<\/span>count<\/span>)<\/span> =><\/span> count<\/span> +<\/span> 1<\/span>)<\/span>}<\/span>><\/span>count is {<\/span>count<\/span>}<\/span><\/<\/span>button<\/span>><\/span>\r\n        <<\/span>p<\/span>><\/span>\r\n          Edit <<\/span>code<\/span>><\/span>src\/App.tsx<\/<\/span>code<\/span>><\/span> and save to test HMR\r\n        <\/<\/span>p<\/span>><\/span>\r\n      <\/<\/span>div<\/span>><\/span>\r\n      <<\/span>p<\/span> className<\/span>=<\/span>\"read-the-docs\"<\/span>><\/span>Click on the Vite and React logos to learn more<\/<\/span>p<\/span>><\/span>\r\n    <\/><\/span>\r\n  );<\/span>\r\n}<\/span>\r\n\r\nexport<\/span> default<\/span> App<\/span>;<\/span>\r\n<\/code><\/pre>\n
\u8003\u8bd5\u51c6\u5907<\/h1>\n
\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4<\/p>\n
npm install<\/span> -D<\/span> vitest jsdom @testing-library\/react @testing-library\/jest-dom\r\n<\/code><\/pre>\n
\u5728src\u76ee\u5f55\u4e0b\u521b\u5efa\u4e00\u4e2a\u540d\u4e3aApp.test.tsx\u7684\u6587\u4ef6\u3002
\n\u7531\u4e8e\u53ea\u6709\u4e00\u4e2a\u6d4b\u8bd5\u88ab\u63cf\u8ff0\uff0c\u6240\u4ee5\u8bf7\u6839\u636e\u9700\u8981\u8fdb\u884c\u6dfb\u52a0\u548c\u4fee\u6539\u3002<\/p>\n
import<\/span> '<\/span>@testing-library\/jest-dom<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> render<\/span>,<\/span> screen<\/span> }<\/span> from<\/span> '<\/span>@testing-library\/react<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> expect<\/span>,<\/span> test<\/span> }<\/span> from<\/span> '<\/span>vitest<\/span>'<\/span>;<\/span>\r\nimport<\/span> App<\/span> from<\/span> '<\/span>@\/App<\/span>'<\/span>;<\/span>\r\n\r\ntest<\/span>(<\/span>'<\/span>renders h1 text<\/span>'<\/span>,<\/span> ()<\/span> =><\/span> {<\/span>\r\n  render<\/span>(<<\/span>App<\/span> \/>);<\/span>\r\n  const<\/span> headerElement<\/span> =<\/span> screen<\/span>.<\/span>getByText<\/span>(<\/span>\/Vite <\/span>\\+<\/span> React\/<\/span>);<\/span>\r\n  expect<\/span>(<\/span>headerElement<\/span>).<\/span>toBeInTheDocument<\/span>();<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
\u5c06vite.config.ts\u6587\u4ef6\u66f4\u6539\u5982\u4e0b\u3002<\/p>\n
+ <\/span>\/\/\/ <reference types=\"vitest\" \/><\/span>\r\n<\/span>import<\/span> {<\/span> defineConfig<\/span> }<\/span> from<\/span> '<\/span>vite<\/span>'<\/span>;<\/span>\r\nimport<\/span> react<\/span> from<\/span> '<\/span>@vitejs\/plugin-react<\/span>'<\/span>;<\/span>\r\n\r\n\/\/ https:\/\/vitejs.dev\/config\/<\/span>\r\nexport<\/span> default<\/span> defineConfig<\/span>({<\/span>\r\n  plugins<\/span>:<\/span> [<\/span>react<\/span>()],<\/span>\r\n  resolve<\/span>:<\/span> {<\/span>\r\n    alias<\/span>:<\/span> {<\/span>\r\n      '<\/span>@<\/span>'<\/span>:<\/span> '<\/span>\/src<\/span>'<\/span>,<\/span>\r\n    },<\/span>\r\n  },<\/span>\r\n+ <\/span>test<\/span>:<\/span> {<\/span>\r\n<\/span>+ <\/span>  globals<\/span>:<\/span> true<\/span>,<\/span>\r\n<\/span>+ <\/span>  environment<\/span>:<\/span> '<\/span>jsdom<\/span>'<\/span>,<\/span>\r\n<\/span>+ <\/span>},<\/span>\r\n<\/span>});<\/span>\r\n<\/code><\/pre>\n
\u5728package.json\u6587\u4ef6\u4e2d\u7684script\u5c5e\u6027\u4e2d\u6dfb\u52a0test\u3002<\/p>\n
{<\/span>\r\n  \"name\"<\/span>:<\/span> \"test-project\"<\/span>,<\/span>\r\n  \"private\"<\/span>:<\/span> true<\/span>,<\/span>\r\n  \"version\"<\/span>:<\/span> \"0.0.0\"<\/span>,<\/span>\r\n  \"type\"<\/span>:<\/span> \"module\"<\/span>,<\/span>\r\n  \"scripts\"<\/span>:<\/span> {<\/span>\r\n    \"dev\"<\/span>:<\/span> \"vite\"<\/span>,<\/span>\r\n    \"build\"<\/span>:<\/span> \"tsc && vite build\"<\/span>,<\/span>\r\n    \"lint\"<\/span>:<\/span> \"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0\"<\/span>,<\/span>\r\n    \"preview\"<\/span>:<\/span> \"vite preview\"<\/span>,<\/span>\r\n+<\/span>   \"test\"<\/span>:<\/span> \"vitest\"<\/span>\r\n<\/span>  },<\/span>\r\n  \u4ee5\u4e0b\u7565...<\/span>\r\n}<\/span>\r\n\r\n<\/code><\/pre>\n
\u521b\u5efaCloudFormation\u6a21\u677f<\/h1>\n
\u8fd9\u662f\u4e00\u4e2a\u6a21\u677f\uff0c\u4f7f\u7528CloudFront + S3\u8fdb\u884c\u6258\u7ba1\uff0c\u5e76\u901a\u8fc7\u5c06push\u63a8\u9001\u5230CodeCommit\uff08\u5728\u6b64\u914d\u7f6e\u4e2d\u901a\u8fc7GitHub Actions\u955c\u50cf\u63a8\u9001\u5230CodeCommit\uff09\u6765\u89e6\u53d1CodePipeline\uff0c\u5e76\u8fdb\u884c\u90e8\u7f72\u3002<\/p>\n
\u6211\u8ba4\u4e3a\u901a\u8fc7\u5c06”react-vite-sample”\u548c”ReactViteSample”\u5b57\u7b26\u4e32\u66ff\u6362\u4e3a\u4efb\u4f55\u9879\u76ee\u540d\u79f0\uff0c\u53ef\u4ee5\u8f7b\u677e\u5730\u5c06\u5176\u5e94\u7528\u5230\u5176\u4ed6\u9879\u76ee\u4e2d\u3002<\/p>\n
\u6587\u4ef6\u5939\u7ed3\u6784<\/h2>\n
.\r\n\u251c\u2500 cloudformation\r\n\u2502  \u251c\u2500 parameters\r\n\u2502  \u2502   \u251c\u2500 codepipeline.json\r\n\u2502  \u2502   \u251c\u2500 hosting.json\r\n\u2502  \u2502   \u2514\u2500 repository.json\r\n\u2502  \u251c\u2500 shell\r\n\u2502  \u2502   \u251c\u2500 01-repository.sh\r\n\u2502  \u2502   \u251c\u2500 02-hosting.sh\r\n\u2502  \u2502   \u251c\u2500 03-codebuild.sh\r\n\u2502  \u2502   \u2514\u2500 04-codepipeline.sh\r\n\u2502  \u2514\u2500 templates\r\n\u2502      \u251c\u2500 codebuild.yml\r\n\u2502      \u251c\u2500 codepipeline.yml\r\n\u2502      \u251c\u2500 hosting.yml\r\n\u2502      \u2514\u2500 repository.yml\r\n\u2514\u2500 buildspec.yml\r\n<\/code><\/pre>\n
\u53c2\u6570<\/h2>\n
{<\/span>\r\n  \"Parameters\"<\/span>:<\/span> {<\/span>\r\n    \"RepositoryName\"<\/span>:<\/span> \"react-vite-sample\"<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
{<\/span>\r\n  \"Parameters\"<\/span>:<\/span> {<\/span>\r\n    \"SourceBucketName\"<\/span>:<\/span> \"react-vite-sample-source-bucket\"<\/span>,<\/span>\r\n    \"DestributionName\"<\/span>:<\/span> \"react-vite-sample-destribution\"<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
{<\/span>\r\n  \"Parameters\"<\/span>:<\/span> {<\/span>\r\n    \"CodePipeLineName\"<\/span>:<\/span> \"react-vite-sample-pipeline\"<\/span>,<\/span>\r\n    \"ArtifactBucketName\"<\/span>:<\/span> \"react-vite-sample-pipeline-artifact-store\"<\/span>,<\/span>\r\n    \"EventBridgeName\"<\/span>:<\/span> \"react-vite-sample-eventbridge-pipeline\"<\/span>,<\/span>\r\n    \"EventBridgeRoleName\"<\/span>:<\/span> \"react-vite-sample-eventbridge-role\"<\/span>,<\/span>\r\n    \"EventBridgePolicyName\"<\/span>:<\/span> \"react-vite-sample-eventbridge-policy\"<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u58f3<\/h2>\n
\u5728\u6587\u4ef6\u540d\u4e2d\u6dfb\u52a001\u7b49\u5b57\u7b26\uff0c\u4f46\u53ea\u8981CodePipeline\u6700\u540e\u6267\u884c\uff0c\u5176\u4f59\u7684\u987a\u5e8f\u90fd\u662f\u65e0\u5173\u7d27\u8981\u7684\u3002<\/p>\n
#!\/bin\/bash<\/span>\r\n\r\nCHANGESET_OPTION<\/span>=<\/span>\"--no-execute-changeset\"<\/span>\r\n\r\nif<\/span> [<\/span> $# <\/span>=<\/span> 1 ]<\/span> &&<\/span> [<\/span> $1<\/span> =<\/span> \"deploy\"<\/span> ]<\/span>;<\/span> then\r\n  <\/span>echo<\/span> \"deploy mode\"<\/span>\r\n  CHANGESET_OPTION<\/span>=<\/span>\"\"<\/span>\r\nfi\r\n\r\n<\/span>CFN_TEMPLATE<\/span>=<\/span>..\/templates\/repository.yml\r\nCFN_STACK_NAME<\/span>=<\/span>react-vite-sample-repository\r\n\r\naws cloudformation deploy --stack-name<\/span> ${<\/span>CFN_STACK_NAME<\/span>}<\/span> --template-file<\/span> ${<\/span>CFN_TEMPLATE<\/span>}<\/span> ${<\/span>CHANGESET_OPTION<\/span>}<\/span>\\<\/span>\r\n    --parameter-overrides<\/span> file:\/\/..\/parameters\/repository.json\r\n<\/code><\/pre>\n
#!\/bin\/bash<\/span>\r\n\r\nCHANGESET_OPTION<\/span>=<\/span>\"--no-execute-changeset\"<\/span>\r\n\r\nif<\/span> [<\/span> $# <\/span>=<\/span> 1 ]<\/span> &&<\/span> [<\/span> $1<\/span> =<\/span> \"deploy\"<\/span> ]<\/span>;<\/span> then\r\n  <\/span>echo<\/span> \"deploy mode\"<\/span>\r\n  CHANGESET_OPTION<\/span>=<\/span>\"\"<\/span>\r\nfi\r\n\r\n<\/span>CFN_TEMPLATE<\/span>=<\/span>..\/templates\/hosting.yml\r\nCFN_STACK_NAME<\/span>=<\/span>react-vite-sample-hosting\r\n\r\naws cloudformation deploy --stack-name<\/span> ${<\/span>CFN_STACK_NAME<\/span>}<\/span> --template-file<\/span> ${<\/span>CFN_TEMPLATE<\/span>}<\/span> ${<\/span>CHANGESET_OPTION<\/span>}<\/span>\\<\/span>\r\n    --capabilities<\/span> CAPABILITY_NAMED_IAM \\<\/span>\r\n    --parameter-overrides<\/span> file:\/\/..\/parameters\/hosting.json\r\n<\/code><\/pre>\n
#!\/bin\/bash<\/span>\r\n\r\nCHANGESET_OPTION<\/span>=<\/span>\"--no-execute-changeset\"<\/span>\r\n\r\nif<\/span> [<\/span> $# <\/span>=<\/span> 1 ]<\/span> &&<\/span> [<\/span> $1<\/span> =<\/span> \"deploy\"<\/span> ]<\/span>;<\/span> then\r\n  <\/span>echo<\/span> \"deploy mode\"<\/span>\r\n  CHANGESET_OPTION<\/span>=<\/span>\"\"<\/span>\r\nfi\r\n\r\n<\/span>CFN_TEMPLATE<\/span>=<\/span>..\/templates\/codebuild.yml\r\nCFN_STACK_NAME<\/span>=<\/span>react-vite-sample-codebuild\r\n\r\naws cloudformation deploy --stack-name<\/span> ${<\/span>CFN_STACK_NAME<\/span>}<\/span> --template-file<\/span> ${<\/span>CFN_TEMPLATE<\/span>}<\/span> ${<\/span>CHANGESET_OPTION<\/span>}<\/span>\\<\/span>\r\n    --capabilities<\/span> CAPABILITY_NAMED_IAM \\<\/span>\r\n<\/code><\/pre>\n
#!\/bin\/bash<\/span>\r\n\r\nCHANGESET_OPTION<\/span>=<\/span>\"--no-execute-changeset\"<\/span>\r\n\r\nif<\/span> [<\/span> $# <\/span>=<\/span> 1 ]<\/span> &&<\/span> [<\/span> $1<\/span> =<\/span> \"deploy\"<\/span> ]<\/span>;<\/span> then\r\n  <\/span>echo<\/span> \"deploy mode\"<\/span>\r\n  CHANGESET_OPTION<\/span>=<\/span>\"\"<\/span>\r\nfi\r\n\r\n<\/span>CFN_TEMPLATE<\/span>=<\/span>..\/templates\/codepipeline.yml\r\nCFN_STACK_NAME<\/span>=<\/span>react-vite-sample-pipeline\r\n\r\naws cloudformation deploy --stack-name<\/span> ${<\/span>CFN_STACK_NAME<\/span>}<\/span> --template-file<\/span> ${<\/span>CFN_TEMPLATE<\/span>}<\/span> ${<\/span>CHANGESET_OPTION<\/span>}<\/span>\\<\/span>\r\n    --capabilities<\/span> CAPABILITY_NAMED_IAM \\<\/span>\r\n    --parameter-overrides<\/span> file:\/\/..\/parameters\/codepipeline.json\r\n<\/code><\/pre>\n
\u6a21\u677f<\/h2>\n
AWSTemplateFormatVersion<\/span>:<\/span> '<\/span>2010-09-09'<\/span>\r\n\r\nParameters<\/span>:<\/span>\r\n  RepositoryName<\/span>:<\/span>\r\n    Type<\/span>:<\/span> String<\/span>\r\n\r\nResources<\/span>:<\/span>\r\n  CodeCommitRepository<\/span>:<\/span>\r\n    Type<\/span>:<\/span> AWS::CodeCommit::Repository<\/span>\r\n    Properties<\/span>:<\/span>\r\n      RepositoryName<\/span>:<\/span> !Ref<\/span> RepositoryName<\/span>\r\n\r\nOutputs<\/span>:<\/span>\r\n  RepositoryName<\/span>:<\/span>\r\n    Value<\/span>:<\/span> !Ref<\/span> RepositoryName<\/span>\r\n    Export<\/span>:<\/span>\r\n      Name<\/span>:<\/span> ReactViteSampleRepositoryName<\/span>\r\n\r\n  RepositoryArn<\/span>:<\/span>\r\n    Value<\/span>:<\/span> !GetAtt<\/span> CodeCommitRepository.Arn<\/span>\r\n    Export<\/span>:<\/span>\r\n      Name<\/span>:<\/span> ReactViteSampleRepositoryArn<\/span>\r\n<\/code><\/pre>\n
AWSTemplateFormatVersion<\/span>:<\/span> '<\/span>2010-09-09'<\/span>\r\n\r\nParameters<\/span>:<\/span>\r\n  SourceBucketName<\/span>:<\/span>\r\n    Type<\/span>:<\/span> String<\/span>\r\n\r\n  DestributionName<\/span>:<\/span>\r\n    Type<\/span>:<\/span> String<\/span>\r\n\r\nResources<\/span>:<\/span>\r\n  S3Bucket<\/span>:<\/span>\r\n    Type<\/span>:<\/span> AWS::S3::Bucket<\/span>\r\n    Properties<\/span>:<\/span>\r\n      BucketName<\/span>:<\/span> !Ref<\/span> SourceBucketName<\/span>\r\n      VersioningConfiguration<\/span>:<\/span>\r\n        Status<\/span>:<\/span> Enabled<\/span>\r\n\r\n  BucketPolicy<\/span>:<\/span>\r\n    Type<\/span>:<\/span> AWS::S3::BucketPolicy<\/span>\r\n    Properties<\/span>:<\/span>\r\n      Bucket<\/span>:<\/span> !Ref<\/span> S3Bucket<\/span>\r\n      PolicyDocument<\/span>:<\/span>\r\n        Version<\/span>:<\/span> '<\/span>2012-10-17'<\/span>\r\n        Statement<\/span>:<\/span>\r\n          -<\/span> Sid<\/span>:<\/span> Allow CloudFront Access<\/span>\r\n            Effect<\/span>:<\/span> Allow<\/span>\r\n            Principal<\/span>:<\/span>\r\n              Service<\/span>:<\/span> cloudfront.amazonaws.com<\/span>\r\n            Action<\/span>:<\/span> s3:GetObject<\/span>\r\n            Resource<\/span>:<\/span> !Sub<\/span> ${S3Bucket.Arn}\/*<\/span>\r\n            Condition<\/span>:<\/span>\r\n              StringEquals<\/span>:<\/span>\r\n                AWS:SourceArn<\/span>:<\/span> !Sub<\/span> arn:${AWS::Partition}:cloudfront::${AWS::AccountId}:distribution\/${Distribution}<\/span>\r\n\r\n  Distribution<\/span>:<\/span>\r\n    Type<\/span>:<\/span> AWS::CloudFront::Distribution<\/span>\r\n    Properties<\/span>:<\/span>\r\n      DistributionConfig<\/span>:<\/span>\r\n        Origins<\/span>:<\/span>\r\n          -<\/span> Id<\/span>:<\/span> S3Origin<\/span>\r\n            DomainName<\/span>:<\/span> !GetAtt<\/span> S3Bucket.DomainName<\/span>\r\n            S3OriginConfig<\/span>:<\/span>\r\n              OriginAccessIdentity<\/span>:<\/span> '<\/span>'<\/span>\r\n            OriginAccessControlId<\/span>:<\/span> !GetAtt<\/span> CloudFrontOriginAccessControl.Id<\/span>\r\n        Enabled<\/span>:<\/span> true<\/span>\r\n        DefaultRootObject<\/span>:<\/span> index.html<\/span>\r\n        Comment<\/span>:<\/span> !Ref<\/span> DestributionName<\/span>\r\n        DefaultCacheBehavior<\/span>:<\/span>\r\n          TargetOriginId<\/span>:<\/span> S3Origin<\/span>\r\n          CachePolicyId<\/span>:<\/span> !GetAtt<\/span> CachePolicy.Id<\/span>\r\n          ViewerProtocolPolicy<\/span>:<\/span> redirect-to-https<\/span>\r\n\r\n  CloudFrontOriginAccessControl<\/span>:<\/span>\r\n    Type<\/span>:<\/span> AWS::CloudFront::OriginAccessControl<\/span>\r\n    Properties<\/span>:<\/span>\r\n      OriginAccessControlConfig<\/span>:<\/span>\r\n        Description<\/span>:<\/span> TestProject Origin Access Control<\/span>\r\n        Name<\/span>:<\/span> TestProjectOAC<\/span>\r\n        OriginAccessControlOriginType<\/span>:<\/span> s3<\/span>\r\n        SigningBehavior<\/span>:<\/span> always<\/span>\r\n        SigningProtocol<\/span>:<\/span> sigv4<\/span>\r\n\r\n  CachePolicy<\/span>:<\/span>\r\n    Type<\/span>:<\/span> AWS::CloudFront::CachePolicy<\/span>\r\n    Properties<\/span>:<\/span>\r\n      CachePolicyConfig<\/span>:<\/span>\r\n        DefaultTTL<\/span>:<\/span> 86400<\/span>\r\n        MaxTTL<\/span>:<\/span> 31536000<\/span>\r\n        MinTTL<\/span>:<\/span> 0<\/span>\r\n        Name<\/span>:<\/span> TestProjectCachePolicy<\/span>\r\n        ParametersInCacheKeyAndForwardedToOrigin<\/span>:<\/span>\r\n          CookiesConfig<\/span>:<\/span>\r\n            CookieBehavior<\/span>:<\/span> none<\/span>\r\n          EnableAcceptEncodingGzip<\/span>:<\/span> false<\/span>\r\n          HeadersConfig<\/span>:<\/span>\r\n            HeaderBehavior<\/span>:<\/span> none<\/span>\r\n          QueryStringsConfig<\/span>:<\/span>\r\n            QueryStringBehavior<\/span>:<\/span> none<\/span>\r\n\r\nOutputs<\/span>:<\/span>\r\n  URL<\/span>:<\/span>\r\n    Value<\/span>:<\/span> !Sub<\/span> https:\/\/${Distribution.DomainName}<\/span>\r\n\r\n  SourceBucketName<\/span>:<\/span>\r\n    Value<\/span>:<\/span> !Ref<\/span> SourceBucketName<\/span>\r\n    Export<\/span>:<\/span>\r\n      Name<\/span>:<\/span> ReactViteSampleSourceBucketName<\/span>\r\n\r\n<\/code><\/pre>\n
AWSTemplateFormatVersion<\/span>:<\/span> '<\/span>2010-09-09'<\/span>\r\n\r\nResources<\/span>:<\/span>\r\n  CodeBuild<\/span>:<\/span>\r\n    Type<\/span>:<\/span> AWS::CodeBuild::Project<\/span>\r\n    Properties<\/span>:<\/span>\r\n      Artifacts<\/span>:<\/span>\r\n        Type<\/span>:<\/span> CODEPIPELINE<\/span>\r\n      Environment<\/span>:<\/span>\r\n        ComputeType<\/span>:<\/span> BUILD_GENERAL1_SMALL<\/span>\r\n        Image<\/span>:<\/span> aws\/codebuild\/amazonlinux2-x86_64-standard:4.0<\/span>\r\n        Type<\/span>:<\/span> LINUX_CONTAINER<\/span>\r\n      Name<\/span>:<\/span> test-project-frontend-build<\/span>\r\n      ServiceRole<\/span>:<\/span> !GetAtt<\/span> CodeBuildRole.Arn<\/span>\r\n      Source<\/span>:<\/span>\r\n        BuildSpec<\/span>:<\/span> buildspec.yml<\/span>\r\n        Type<\/span>:<\/span> CODEPIPELINE<\/span>\r\n\r\n  CodeBuildRole<\/span>:<\/span>\r\n    Type<\/span>:<\/span> AWS::IAM::Role<\/span>\r\n    Properties<\/span>:<\/span>\r\n      AssumeRolePolicyDocument<\/span>:<\/span>\r\n        Version<\/span>:<\/span> '<\/span>2012-10-17'<\/span>\r\n        Statement<\/span>:<\/span>\r\n          -<\/span> Effect<\/span>:<\/span> Allow<\/span>\r\n            Principal<\/span>:<\/span>\r\n              Service<\/span>:<\/span>\r\n                -<\/span> codebuild.amazonaws.com<\/span>\r\n            Action<\/span>:<\/span> sts:AssumeRole<\/span>\r\n      Path<\/span>:<\/span> \/<\/span>\r\n      Policies<\/span>:<\/span>\r\n        -<\/span> PolicyName<\/span>:<\/span> CodeBuildPolicy<\/span>\r\n          PolicyDocument<\/span>:<\/span>\r\n            Statement<\/span>:<\/span>\r\n              -<\/span> Effect<\/span>:<\/span> Allow<\/span>\r\n                Resource<\/span>:<\/span> '<\/span>*'<\/span>\r\n                Action<\/span>:<\/span>\r\n                  -<\/span> '<\/span>s3:*'<\/span>\r\n                  -<\/span> '<\/span>logs:*'<\/span>\r\n\r\nOutputs<\/span>:<\/span>\r\n  CodeBuild<\/span>:<\/span>\r\n    Value<\/span>:<\/span> !Ref<\/span> CodeBuild<\/span>\r\n    Export<\/span>:<\/span>\r\n      Name<\/span>:<\/span> ReactViteSampleCodeBuild<\/span>\r\n<\/code><\/pre>\n
AWSTemplateFormatVersion<\/span>:<\/span> '<\/span>2010-09-09'<\/span>\r\n\r\nParameters<\/span>:<\/span>\r\n  CodePipeLineName<\/span>:<\/span>\r\n    Type<\/span>:<\/span> String<\/span>\r\n\r\n  ArtifactBucketName<\/span>:<\/span>\r\n    Type<\/span>:<\/span> String<\/span>\r\n\r\n  EventBridgeName<\/span>:<\/span>\r\n    Type<\/span>:<\/span> String<\/span>\r\n\r\n  EventBridgeRoleName<\/span>:<\/span>\r\n    Type<\/span>:<\/span> String<\/span>\r\n\r\n  EventBridgePolicyName<\/span>:<\/span>\r\n    Type<\/span>:<\/span> String<\/span>\r\n\r\nResources<\/span>:<\/span>\r\n  CodePipeline<\/span>:<\/span>\r\n    Type<\/span>:<\/span> AWS::CodePipeline::Pipeline<\/span>\r\n    Properties<\/span>:<\/span>\r\n      Name<\/span>:<\/span> !Ref<\/span> CodePipeLineName<\/span>\r\n      RoleArn<\/span>:<\/span> !GetAtt<\/span> PipelineRole.Arn<\/span>\r\n      ArtifactStore<\/span>:<\/span>\r\n        Type<\/span>:<\/span> S3<\/span>\r\n        Location<\/span>:<\/span> !Ref<\/span> ArtifactStoreBucket<\/span>\r\n      Stages<\/span>:<\/span>\r\n        -<\/span> Name<\/span>:<\/span> Source<\/span>\r\n          Actions<\/span>:<\/span>\r\n            -<\/span> ActionTypeId<\/span>:<\/span>\r\n                Category<\/span>:<\/span> Source<\/span>\r\n                Owner<\/span>:<\/span> AWS<\/span>\r\n                Provider<\/span>:<\/span> CodeCommit<\/span>\r\n                Version<\/span>:<\/span> 1<\/span>\r\n              Configuration<\/span>:<\/span>\r\n                RepositoryName<\/span>:<\/span> !ImportValue<\/span> ReactViteSampleRepositoryName<\/span>\r\n                BranchName<\/span>:<\/span> main<\/span>\r\n                PollForSourceChanges<\/span>:<\/span> false<\/span>\r\n              Name<\/span>:<\/span> Source<\/span>\r\n              OutputArtifacts<\/span>:<\/span>\r\n                -<\/span> Name<\/span>:<\/span> SourceArtifact<\/span>\r\n              RunOrder<\/span>:<\/span> 1<\/span>\r\n\r\n        -<\/span> Name<\/span>:<\/span> Build<\/span>\r\n          Actions<\/span>:<\/span>\r\n            -<\/span> ActionTypeId<\/span>:<\/span>\r\n                Category<\/span>:<\/span> Build<\/span>\r\n                Owner<\/span>:<\/span> AWS<\/span>\r\n                Provider<\/span>:<\/span> CodeBuild<\/span>\r\n                Version<\/span>:<\/span> 1<\/span>\r\n              Configuration<\/span>:<\/span>\r\n                ProjectName<\/span>:<\/span> !ImportValue<\/span> ReactViteSampleCodeBuild<\/span>\r\n              InputArtifacts<\/span>:<\/span>\r\n                -<\/span> Name<\/span>:<\/span> SourceArtifact<\/span>\r\n              Name<\/span>:<\/span> Build<\/span>\r\n              OutputArtifacts<\/span>:<\/span>\r\n                -<\/span> Name<\/span>:<\/span> BuildArtifact<\/span>\r\n              RunOrder<\/span>:<\/span> 1<\/span>\r\n\r\n        -<\/span> Name<\/span>:<\/span> Deploy<\/span>\r\n          Actions<\/span>:<\/span>\r\n            -<\/span> ActionTypeId<\/span>:<\/span>\r\n                Category<\/span>:<\/span> Deploy<\/span>\r\n                Owner<\/span>:<\/span> AWS<\/span>\r\n                Provider<\/span>:<\/span> S3<\/span>\r\n                Version<\/span>:<\/span> 1<\/span>\r\n              Configuration<\/span>:<\/span>\r\n                BucketName<\/span>:<\/span> !ImportValue<\/span> ReactViteSampleSourceBucketName<\/span>\r\n                Extract<\/span>:<\/span> true<\/span>\r\n              Name<\/span>:<\/span> Deploy<\/span>\r\n              InputArtifacts<\/span>:<\/span>\r\n                -<\/span> Name<\/span>:<\/span> BuildArtifact<\/span>\r\n              RunOrder<\/span>:<\/span> 1<\/span>\r\n      RestartExecutionOnUpdate<\/span>:<\/span> false<\/span>\r\n\r\n  ArtifactStoreBucket<\/span>:<\/span>\r\n    Type<\/span>:<\/span> '<\/span>AWS::S3::Bucket'<\/span>\r\n    Properties<\/span>:<\/span>\r\n      BucketName<\/span>:<\/span> !Ref<\/span> ArtifactBucketName<\/span>\r\n      LifecycleConfiguration<\/span>:<\/span>\r\n        Rules<\/span>:<\/span>\r\n          -<\/span> Id<\/span>:<\/span> clear-old-objects-rule<\/span>\r\n            Status<\/span>:<\/span> Enabled<\/span>\r\n            ExpirationInDays<\/span>:<\/span> 3<\/span>\r\n      PublicAccessBlockConfiguration<\/span>:<\/span>\r\n        BlockPublicAcls<\/span>:<\/span> True<\/span>\r\n        BlockPublicPolicy<\/span>:<\/span> True<\/span>\r\n        IgnorePublicAcls<\/span>:<\/span> True<\/span>\r\n        RestrictPublicBuckets<\/span>:<\/span> True<\/span>\r\n\r\n  PipelineRole<\/span>:<\/span>\r\n    Type<\/span>:<\/span> AWS::IAM::Role<\/span>\r\n    Properties<\/span>:<\/span>\r\n      AssumeRolePolicyDocument<\/span>:<\/span>\r\n        Version<\/span>:<\/span> '<\/span>2012-10-17'<\/span>\r\n        Statement<\/span>:<\/span>\r\n          -<\/span> Effect<\/span>:<\/span> Allow<\/span>\r\n            Principal<\/span>:<\/span>\r\n              Service<\/span>:<\/span>\r\n                -<\/span> codepipeline.amazonaws.com<\/span>\r\n            Action<\/span>:<\/span> sts:AssumeRole<\/span>\r\n      Path<\/span>:<\/span> \/<\/span>\r\n      Policies<\/span>:<\/span>\r\n        -<\/span> PolicyName<\/span>:<\/span> CodePipelinePolicy<\/span>\r\n          PolicyDocument<\/span>:<\/span>\r\n            Statement<\/span>:<\/span>\r\n              -<\/span> Effect<\/span>:<\/span> Allow<\/span>\r\n                Resource<\/span>:<\/span> '<\/span>*'<\/span>\r\n                Action<\/span>:<\/span>\r\n                  -<\/span> '<\/span>s3:*'<\/span>\r\n                  -<\/span> '<\/span>codecommit:*'<\/span>\r\n                  -<\/span> '<\/span>codebuild:*'<\/span>\r\n\r\n  EventBridge<\/span>:<\/span>\r\n    Type<\/span>:<\/span> AWS::Events::Rule<\/span>\r\n    Properties<\/span>:<\/span>\r\n      Description<\/span>:<\/span> for codepipeline<\/span>\r\n      EventPattern<\/span>:<\/span>\r\n        source<\/span>:<\/span>\r\n          -<\/span> aws.codecommit<\/span>\r\n        detail-type<\/span>:<\/span>\r\n          -<\/span> '<\/span>CodeCommit<\/span> Repository<\/span> State<\/span> Change'<\/span>\r\n        resources<\/span>:<\/span>\r\n          -<\/span> !ImportValue<\/span> ReactViteSampleRepositoryArn<\/span>\r\n        detail<\/span>:<\/span>\r\n          event<\/span>:<\/span>\r\n            -<\/span> referenceCreated<\/span>\r\n            -<\/span> referenceUpdated<\/span>\r\n          referenceType<\/span>:<\/span>\r\n            -<\/span> branch<\/span>\r\n          referenceName<\/span>:<\/span>\r\n            -<\/span> main<\/span>\r\n      Name<\/span>:<\/span> !Ref<\/span> EventBridgeName<\/span>\r\n      State<\/span>:<\/span> ENABLED<\/span>\r\n      Targets<\/span>:<\/span>\r\n        -<\/span> Arn<\/span>:<\/span> !Sub<\/span> arn:${AWS::Partition}:codepipeline:${AWS::Region}:${AWS::AccountId}:${CodePipeline}<\/span>\r\n          Id<\/span>:<\/span> CodePipeline<\/span>\r\n          RoleArn<\/span>:<\/span> !GetAtt<\/span> EventBridgeIAMRole.Arn<\/span>\r\n\r\n  EventBridgeIAMRole<\/span>:<\/span>\r\n    Type<\/span>:<\/span> AWS::IAM::Role<\/span>\r\n    Properties<\/span>:<\/span>\r\n      AssumeRolePolicyDocument<\/span>:<\/span>\r\n        Version<\/span>:<\/span> '<\/span>2012-10-17'<\/span>\r\n        Statement<\/span>:<\/span>\r\n          -<\/span> Effect<\/span>:<\/span> Allow<\/span>\r\n            Principal<\/span>:<\/span>\r\n              Service<\/span>:<\/span>\r\n                -<\/span> events.amazonaws.com<\/span>\r\n            Action<\/span>:<\/span>\r\n              -<\/span> '<\/span>sts:AssumeRole'<\/span>\r\n      ManagedPolicyArns<\/span>:<\/span>\r\n        -<\/span> !Ref<\/span> EventBridgeIAMPolicy<\/span>\r\n      RoleName<\/span>:<\/span> !Ref<\/span> EventBridgeRoleName<\/span>\r\n\r\n  EventBridgeIAMPolicy<\/span>:<\/span>\r\n    Type<\/span>:<\/span> AWS::IAM::ManagedPolicy<\/span>\r\n    Properties<\/span>:<\/span>\r\n      PolicyDocument<\/span>:<\/span>\r\n        Version<\/span>:<\/span> '<\/span>2012-10-17'<\/span>\r\n        Statement<\/span>:<\/span>\r\n          -<\/span> Effect<\/span>:<\/span> Allow<\/span>\r\n            Action<\/span>:<\/span>\r\n              -<\/span> '<\/span>codepipeline:StartPipelineExecution'<\/span>\r\n            Resource<\/span>:<\/span>\r\n              -<\/span> !Sub<\/span> arn:${AWS::Partition}:codepipeline:${AWS::Region}:${AWS::AccountId}:${CodePipeline}<\/span>\r\n      ManagedPolicyName<\/span>:<\/span> !Ref<\/span> EventBridgePolicyName<\/span>\r\n<\/code><\/pre>\n
\u5efa\u7b51\u89c4\u8303.<\/h2>\n
version<\/span>:<\/span> 0.2<\/span>\r\n\r\nphases<\/span>:<\/span>\r\n  install<\/span>:<\/span>\r\n    on-failure<\/span>:<\/span> ABORT<\/span>\r\n    commands<\/span>:<\/span>\r\n      -<\/span> if [ -e \/tmp\/node_modules.tar ]; then tar xf \/tmp\/node_modules.tar; fi<\/span>\r\n      -<\/span> npm install<\/span>\r\n\r\n  pre_build<\/span>:<\/span>\r\n    on-failure<\/span>:<\/span> ABORT<\/span>\r\n    commands<\/span>:<\/span>\r\n      -<\/span> npm run test<\/span>\r\n\r\n  build<\/span>:<\/span>\r\n    on-failure<\/span>:<\/span> ABORT<\/span>\r\n    commands<\/span>:<\/span>\r\n      -<\/span> npm run build<\/span>\r\n\r\nartifacts<\/span>:<\/span>\r\n  files<\/span>:<\/span>\r\n    -<\/span> '<\/span>**\/*'<\/span>\r\n  base-directory<\/span>:<\/span> dist<\/span>\r\n\r\ncache<\/span>:<\/span>\r\n  paths<\/span>:<\/span>\r\n    -<\/span> \/tmp\/node_modules.tar<\/span>\r\n<\/code><\/pre>\n
\u521b\u5efa GitHub \u5b58\u50a8\u5e93\u7684\u8bbe\u7f6e\uff0c\u7528\u4e8e\u955c\u50cf<\/h1>\n
 <\/p>\n
\u8bf7\u53c2\u8003\u4e0a\u8ff0\u6587\u7ae0\uff0c\u5e76\u6267\u884c\u4ee5\u4e0b\u64cd\u4f5c\u3002<\/p>\n
    \n
  • \n
      SSH\u30ad\u30fc\u3092\u4f5c\u6210<\/ul>\n<\/li>\n<\/ul>\n
       <\/p>\n
        \n
      • \n
          CodeCommit\u306e\u516c\u958bSSH\u30ad\u30fc\u3068\u3057\u3066\u767b\u9332<\/ul>\n<\/li>\n<\/ul>\n
           <\/p>\n
            \n
          • \n
              GitHub\u30ea\u30dd\u30b8\u30c8\u30ea\u4f5c\u6210<\/ul>\n<\/li>\n<\/ul>\n
               <\/p>\n
                \u4f5c\u6210\u3057\u305f\u30ea\u30dd\u30b8\u30c8\u30ea\u306eActions\u306eSecrets\u3092\u8a2d\u5b9a<\/ul>\n
                \u521b\u5efa\u7528\u4e8eGitHub\u4ed3\u5e93\u955c\u50cf\u7684\u6587\u4ef6<\/h1>\n
                \u4f7f\u7528CodePipeline\u65f6\uff0c\u4e0eCodeCommit\u7684\u534f\u4f5c\u66f4\u52a0\u65b9\u4fbf\uff0c\u4f46\u4e0d\u80fd\u8fdb\u884c\u516c\u5f00\u3002
                \n\u4e3a\u4e86\u80fd\u591f\u516c\u5f00\u5b58\u50a8\u5e93\uff0c\u6211\u4eec\u5c06GitHub\u5b58\u50a8\u5e93\u955c\u50cf\u5230CodeCommit\u3002<\/p>\n
                \u901a\u8fc7\u8fd9\u6837\u505a\uff0cCodePipeline\u53ef\u4ee5\u4e0eCodeCommit\u8fdb\u884c\u534f\u4f5c\uff0c\u4ece\u800c\u4f7f\u914d\u7f6e\u53d8\u5f97\u66f4\u52a0\u7b80\u4fbf\u3002<\/p>\n
                \u521b\u5efaCodeCommit\u5b58\u50a8\u5e93<\/h2>\n
                \u8bf7\u79fb\u52a8\u5230 cloudformation\/shell\u76ee\u5f55\uff0c\u5e76\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u3002
                \n\u7531\u4e8e\u5bb9\u5668\u4e2d\u672a\u5b89\u88c5 aws-cli\uff0c\u56e0\u6b64\u8bf7\u5728\u5df2\u5b89\u88c5 aws-cli \u7684\u4e3b\u673a\u7ec8\u7aef\u4e0a\u6267\u884c\u3002<\/p>\n
                sh 01-repository.sh deploy\r\n<\/code><\/pre>\n
                \u5728\u4e0a\u8ff0\u547d\u4ee4\u4e2d\u521b\u5efa\u4e86CodeCommit\u5b58\u50a8\u5e93\uff0c\u56e0\u6b64\u8bf7\u5728CodeCommit\u9875\u9762\u4e0a\u590d\u5236SSH URL\u3002<\/p>\n
                \"image.png\"<\/div>\n
                \u6587\u4ef6\u5939\u7684\u5c42\u7ea7<\/h2>\n
                \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30eb\u30fc\u30c8\r\n\u2514\u2500 .github\r\n   \u2514\u2500 workflows\r\n      \u2514\u2500 main.yml\r\n<\/code><\/pre>\n
                \u6211\u5c06\u521b\u5efa\u4e0b\u9762\u7684\u5185\u5bb9\u3002\u8bf7\u5c06\u590d\u5236\u7684URL\u7c98\u8d34\u5230target_repo_url\u4e2d\u3002<\/p>\n
                name<\/span>:<\/span> Mirroring<\/span>\r\n\r\non<\/span>:<\/span> [<\/span> push<\/span>,<\/span> delete<\/span> ]<\/span>\r\n\r\njobs<\/span>:<\/span>\r\n  to_codecommit<\/span>:<\/span>\r\n    runs-on<\/span>:<\/span> ubuntu-latest<\/span>\r\n    steps<\/span>:<\/span>\r\n      -<\/span> uses<\/span>:<\/span> actions\/checkout@v3<\/span>\r\n        with<\/span>:<\/span>\r\n          fetch-depth<\/span>:<\/span> 0<\/span> \r\n      -<\/span> uses<\/span>:<\/span> pixta-dev\/repository-mirroring-action@v1<\/span>\r\n        with<\/span>:<\/span>\r\n          target_repo_url<\/span>:<\/span> <\u30b3\u30d4\u30fc\u3057\u305fCodeCommit\u30ea\u30dd\u30b8\u30c8\u30ea\u306eSSH\u306eURL><\/span>\r\n          ssh_private_key<\/span>:<\/span> ${{ secrets.CODECOMMIT_SSH_PRIVATE_KEY }}<\/span>\r\n          ssh_username<\/span>:<\/span> ${{ secrets.CODECOMMIT_SSH_PRIVATE_KEY_ID }}<\/span>\r\n<\/code><\/pre>\n
                \u521b\u5efa\u670d\u52a1 fu w\u00f9)<\/h1>\n
                \u6309\u987a\u5e8f\u6267\u884c\u9664\u4e86cloudformation\/shell\u76ee\u5f55\u4e0b\u7684\u4ed3\u5e93\u4e4b\u5916\u7684shell\u811a\u672c\u3002\u8fd9\u4e5f\u4e0d\u662f\u5728\u5bb9\u5668\u5185\u6267\u884c\uff0c\u800c\u662f\u5728\u5b89\u88c5\u4e86aws-cli\u7684\u4e3b\u673a\u7ec8\u7aef\u4e0a\u6267\u884c\u3002<\/p>\n
                sh 02-hosting.sh deploy\r\nsh 03-codebuild.sh deploy\r\nsh 04-codepipeline.sh deploy\r\n<\/code><\/pre>\n
                \u90e8\u7f72<\/h1>\n
                \u5f53\u4f60\u5c06\u4ee3\u7801\u63d0\u4ea4\u5230GitHub\u4ed3\u5e93\uff0c\u5b83\u4f1a\u4e0eCodeCommit\u8fdb\u884c\u534f\u4f5c\uff0c\u5e76\u89e6\u53d1CodePipeline\u5f00\u59cb\u81ea\u52a8\u90e8\u7f72\u3002<\/p>\n
                git init\u3000\r\ngit commit -m \"first commit\"\r\ngit remote add <\u4f5c\u6210\u3057\u305fgithub\u30ea\u30dd\u30b8\u30c8\u30ea\u306eURL>\r\ngit push -u origin main\r\n<\/code><\/pre>\n
                \u5728\u90e8\u7f72\u540e\uff0c\u60a8\u53ef\u4ee5\u5728CloudFront\u4e2d\u9009\u62e9\u76f8\u5e94\u7684\u5206\u53d1\uff0c\u5c06\u5206\u53d1\u57df\u540d\u590d\u5236\u5e76\u7c98\u8d34\u5230URL\u4e2d\uff0c\u5373\u53ef\u786e\u8ba4\u5c4f\u5e55\u4e0a\u7684\u4fe1\u606f\u3002<\/p>\n
                \u7531\u4e8e\u9700\u8981\u4e00\u4e9b\u65f6\u95f4\u6765\u53cd\u6620\uff0c\u5982\u679c\u51fa\u73b0\u9519\u8bef\u753b\u9762\uff0c\u8bf7\u7a0d\u7b49\u4e00\u6bb5\u65f6\u95f4\u540e\u518d\u786e\u8ba4\u4e00\u4e0b\u3002<\/p>\n
                \u6700\u540e<\/h1>\n
                \u6211\u8ba4\u4e3a\u4f7f\u7528Amplify\u53ef\u4ee5\u5f88\u5bb9\u6613\u5730\u8fdb\u884c\u6784\u5efa\uff0c\u4f46\u7531\u4e8e\u4e0d\u77e5\u9053\u5b83\u5728\u505a\u4ec0\u4e48\uff0c\u6211\u611f\u5230\u6709\u4e9b\u5bb3\u6015\uff0c\u6240\u4ee5\u6211\u5c1d\u8bd5\u8fdb\u884c\u4e86\u6784\u5efa\u3002<\/p>\n
                \u5f00\u53d1\u8fc7\u7a0b\u4e2d\uff0c\u5982\u679c\u80fd\u591f\u5728\u5f00\u59cb\u65f6\u53c2\u8003\u8fd9\u7bc7\u6587\u7ae0\u5e76\u5b8c\u6210\u6784\u5efa\uff0c\u90a3\u5c06\u662f\u975e\u5e38\u4ee4\u4eba\u9ad8\u5174\u7684\u4e8b\u60c5\u3002<\/p>\n
                \u4ee5\u4e0b\u662fGitHub\u5b58\u50a8\u5e93\u3002
                \n\u6211\u8ba4\u4e3a\u6700\u597d\u662f\u5728\u9002\u5f53\u7684\u4f4d\u7f6e\u514b\u9686\u5e76\u9010\u4e2a\u590d\u5236\u6240\u9700\u7684\u6587\u4ef6\u3002<\/p>\n
                 <\/p>\n
                \u53ef\u4ee5\u67e5\u770b\u8fd9\u7bc7\u6587\u7ae0\u3002<\/h1>\n
                ESLint\u662f\u4e00\u4e2a\u4ee3\u7801\u9759\u6001\u5206\u6790\u5de5\u5177\uff0c\u7528\u4e8e\u5728JavaScript\u4ee3\u7801\u4e2d\u627e\u5230\u5e76\u4fee\u590d\u95ee\u9898\u3002Prettier\u662f\u4e00\u4e2a\u4ee3\u7801\u683c\u5f0f\u5316\u5de5\u5177\uff0c\u53ef\u4ee5\u81ea\u52a8\u8c03\u6574\u4ee3\u7801\u7684\u6837\u5f0f\u548c\u6392\u7248\u3002<\/p>\n
                  \n
                • \n
                    Setting up ESLint & Prettier in ViteJS<\/ul>\n<\/li>\n<\/ul>\n
                     <\/p>\n
                      [import\/no-unresolved] when using with typescript “baseUrl” and “paths” option #1485<\/ul>\n
                      \u4e91\u5f62\u6210<\/p>\n
                        \n
                      • \n
                          CloudFormation\u306e\u5168\u3066\u3092\u5473\u308f\u3044\u3064\u304f\u305b\uff01\u300cAWS\u306e\u5168\u3066\u3092\u30b3\u30fc\u30c9\u3067\u7ba1\u7406\u3059\u308b\u65b9\u6cd5\u301c\u305d\u306e\u7406\u60f3\u3068\u73fe\u5b9f\u301c\u300d<\/ul>\n<\/li>\n<\/ul>\n
                           <\/p>\n
                            \n
                          • \n
                              CloudFormation \u3067 OAI \u3092\u4f7f\u3063\u305f CloudFront + S3 \u306e\u9759\u7684\u30b3\u30f3\u30c6\u30f3\u30c4\u914d\u4fe1\u30a4\u30f3\u30d5\u30e9\u3092\u4f5c\u308b<\/ul>\n<\/li>\n<\/ul>\n
                               <\/p>\n
                                \n
                              • \n
                                  CloudFormation\u3011CloudFront \u306e OAI \u3092 OAC \u306b\u79fb\u884c\u3059\u308b<\/ul>\n<\/li>\n<\/ul>\n
                                   <\/p>\n
                                    \n
                                  • \n
                                      AWS CodeBuild\u3067node_modules\u3092\u30ad\u30e3\u30c3\u30b7\u30e5\u3057\u305f\u3089\u30cf\u30de\u3063\u305f<\/ul>\n<\/li>\n<\/ul>\n
                                       <\/p>\n
                                        \n
                                      • \n
                                          CodePipeline\u3092CloudFormation\u3067\u4f5c\u6210\u3057\u3066\u307f\u305f<\/ul>\n<\/li>\n<\/ul>\n
                                           <\/p>\n
                                            SPA(React)\u306e\u30d3\u30eb\u30c9\u3068\u30c7\u30d7\u30ed\u30a4\u3092\u81ea\u52d5\u5316\u3059\u308bAWS CodePipeline\u7528\u306eCloudFormation\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8<\/ul>\n
                                            \u6d4b\u8bd5<\/p>\n
                                              \n
                                            • \n
                                                Vitest\u516c\u5f0f<\/ul>\n<\/li>\n<\/ul>\n
                                                 <\/p>\n
                                                  Vitest\u3092\u4f7f\u3063\u3066Unit Testing\u306b\u30c1\u30e3\u30ec\u30f3\u30b8(Vue, React, Svelte)<\/ul>\n
                                                  GitHub\u4ed3\u5e93\u955c\u50cf\u5316<\/p>\n
                                                    GitHub\u306b\u30d7\u30c3\u30b7\u30e5\u3059\u308b\u3068\u3001CodeCommit\u3078\u81ea\u52d5\u3067\u540c\u671f\u3055\u305b\u308b\u65b9\u6cd5<\/ul>\n","protected":false},"excerpt":{"rendered":"
                                                    \u9996\u5148 \u6211\u4e2a\u4eba\u5728\u5f00\u53d1\u4e2d\u7ecf\u5e38\u4f7f\u7528React\u3002 \u7136\u800c\uff0c\u7531\u4e8e\u6bcf\u6b21\u90fd\u4f1a\u95ee\u81ea\u5df1\u201c\u600e\u4e48\u6765\u521b\u5efa\u6765\u7740\uff1f\u201d\u6240\u4ee5\u4e3a\u4e86\u4eca\u540e\u4e2a\u4eba\u5f00\u53d1\u7684\u987a […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-38164","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nReact + Vite \u5e94\u7528\u73af\u5883\u642d\u5efa\u3001\u90e8\u7f72\u5907\u5fd8\u5f55 - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/react-vite-\u5e94\u7528\u73af\u5883\u642d\u5efa\u3001\u90e8\u7f72\u5907\u5fd8\u5f55\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React + Vite \u5e94\u7528\u73af\u5883\u642d\u5efa\u3001\u90e8\u7f72\u5907\u5fd8\u5f55\" \/>\n<meta property=\"og:description\" content=\"\u9996\u5148 \u6211\u4e2a\u4eba\u5728\u5f00\u53d1\u4e2d\u7ecf\u5e38\u4f7f\u7528React\u3002 \u7136\u800c\uff0c\u7531\u4e8e\u6bcf\u6b21\u90fd\u4f1a\u95ee\u81ea\u5df1\u201c\u600e\u4e48\u6765\u521b\u5efa\u6765\u7740\uff1f\u201d\u6240\u4ee5\u4e3a\u4e86\u4eca\u540e\u4e2a\u4eba\u5f00\u53d1\u7684\u987a […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/react-vite-\u5e94\u7528\u73af\u5883\u642d\u5efa\u3001\u90e8\u7f72\u5907\u5fd8\u5f55\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-22T16:47:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-29T01:27:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d329337434c4406c62a78\/82-0.png\" \/>\n<meta name=\"author\" content=\"\u6587, \u7fd4\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u6587, \u7fd4\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/react-vite-%e5%ba%94%e7%94%a8%e7%8e%af%e5%a2%83%e6%90%ad%e5%bb%ba%e3%80%81%e9%83%a8%e7%bd%b2%e5%a4%87%e5%bf%98%e5%bd%95\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/react-vite-%e5%ba%94%e7%94%a8%e7%8e%af%e5%a2%83%e6%90%ad%e5%bb%ba%e3%80%81%e9%83%a8%e7%bd%b2%e5%a4%87%e5%bf%98%e5%bd%95\/\",\"name\":\"React + Vite \u5e94\u7528\u73af\u5883\u642d\u5efa\u3001\u90e8\u7f72\u5907\u5fd8\u5f55 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-03-22T16:47:52+00:00\",\"dateModified\":\"2024-04-29T01:27:39+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/react-vite-%e5%ba%94%e7%94%a8%e7%8e%af%e5%a2%83%e6%90%ad%e5%bb%ba%e3%80%81%e9%83%a8%e7%bd%b2%e5%a4%87%e5%bf%98%e5%bd%95\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/react-vite-%e5%ba%94%e7%94%a8%e7%8e%af%e5%a2%83%e6%90%ad%e5%bb%ba%e3%80%81%e9%83%a8%e7%bd%b2%e5%a4%87%e5%bf%98%e5%bd%95\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/react-vite-%e5%ba%94%e7%94%a8%e7%8e%af%e5%a2%83%e6%90%ad%e5%bb%ba%e3%80%81%e9%83%a8%e7%bd%b2%e5%a4%87%e5%bf%98%e5%bd%95\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React + Vite \u5e94\u7528\u73af\u5883\u642d\u5efa\u3001\u90e8\u7f72\u5907\u5fd8\u5f55\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c\",\"name\":\"\u6587, \u7fd4\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g\",\"caption\":\"\u6587, \u7fd4\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/wenxiang\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/react-vite-%e5%ba%94%e7%94%a8%e7%8e%af%e5%a2%83%e6%90%ad%e5%bb%ba%e3%80%81%e9%83%a8%e7%bd%b2%e5%a4%87%e5%bf%98%e5%bd%95\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React + Vite \u5e94\u7528\u73af\u5883\u642d\u5efa\u3001\u90e8\u7f72\u5907\u5fd8\u5f55 - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/react-vite-\u5e94\u7528\u73af\u5883\u642d\u5efa\u3001\u90e8\u7f72\u5907\u5fd8\u5f55\/","og_locale":"zh_CN","og_type":"article","og_title":"React + Vite \u5e94\u7528\u73af\u5883\u642d\u5efa\u3001\u90e8\u7f72\u5907\u5fd8\u5f55","og_description":"\u9996\u5148 \u6211\u4e2a\u4eba\u5728\u5f00\u53d1\u4e2d\u7ecf\u5e38\u4f7f\u7528React\u3002 \u7136\u800c\uff0c\u7531\u4e8e\u6bcf\u6b21\u90fd\u4f1a\u95ee\u81ea\u5df1\u201c\u600e\u4e48\u6765\u521b\u5efa\u6765\u7740\uff1f\u201d\u6240\u4ee5\u4e3a\u4e86\u4eca\u540e\u4e2a\u4eba\u5f00\u53d1\u7684\u987a […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/react-vite-\u5e94\u7528\u73af\u5883\u642d\u5efa\u3001\u90e8\u7f72\u5907\u5fd8\u5f55\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-03-22T16:47:52+00:00","article_modified_time":"2024-04-29T01:27:39+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d329337434c4406c62a78\/82-0.png"}],"author":"\u6587, \u7fd4","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u6587, \u7fd4","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"9 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/react-vite-%e5%ba%94%e7%94%a8%e7%8e%af%e5%a2%83%e6%90%ad%e5%bb%ba%e3%80%81%e9%83%a8%e7%bd%b2%e5%a4%87%e5%bf%98%e5%bd%95\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/react-vite-%e5%ba%94%e7%94%a8%e7%8e%af%e5%a2%83%e6%90%ad%e5%bb%ba%e3%80%81%e9%83%a8%e7%bd%b2%e5%a4%87%e5%bf%98%e5%bd%95\/","name":"React + Vite \u5e94\u7528\u73af\u5883\u642d\u5efa\u3001\u90e8\u7f72\u5907\u5fd8\u5f55 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-03-22T16:47:52+00:00","dateModified":"2024-04-29T01:27:39+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/react-vite-%e5%ba%94%e7%94%a8%e7%8e%af%e5%a2%83%e6%90%ad%e5%bb%ba%e3%80%81%e9%83%a8%e7%bd%b2%e5%a4%87%e5%bf%98%e5%bd%95\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/react-vite-%e5%ba%94%e7%94%a8%e7%8e%af%e5%a2%83%e6%90%ad%e5%bb%ba%e3%80%81%e9%83%a8%e7%bd%b2%e5%a4%87%e5%bf%98%e5%bd%95\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/react-vite-%e5%ba%94%e7%94%a8%e7%8e%af%e5%a2%83%e6%90%ad%e5%bb%ba%e3%80%81%e9%83%a8%e7%bd%b2%e5%a4%87%e5%bf%98%e5%bd%95\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"React + Vite \u5e94\u7528\u73af\u5883\u642d\u5efa\u3001\u90e8\u7f72\u5907\u5fd8\u5f55"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c","name":"\u6587, \u7fd4","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g","caption":"\u6587, \u7fd4"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/wenxiang\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/react-vite-%e5%ba%94%e7%94%a8%e7%8e%af%e5%a2%83%e6%90%ad%e5%bb%ba%e3%80%81%e9%83%a8%e7%bd%b2%e5%a4%87%e5%bf%98%e5%bd%95\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=38164"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38164\/revisions"}],"predecessor-version":[{"id":84439,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38164\/revisions\/84439"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=38164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=38164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=38164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}