vue-cliでアプリ作ってGitHubにおいてNetlifyに上げる。Fuctionsも使いたい。そんな備忘録。
環境はWin10上でWSL2（Ubuntu）です。
Vue CLIのインストール
-
$ sudo npm install -g --force @vue/cli- いつのだかわからないvue-cliが入ってたので、--forceで上書き
メイン画面をNetlifyに上げるまで
$ vue create my-application$ cd my-application- ブラウザでGitHubにリポジトリ作成(README.mdの自動生成とかはしなかった。vue cliのと被るし。)
-
my-applicationディレクトリ直下で以下を実施(GitHubの画面に表示されいる通りに実施。mainブランチにするような手順になってたがmasterのままにした。)$ git remote add origin git@github.com:<アカウント名>/<リポジトリ名>.git$ git push -u origin master
- ブラウザでNetlifyで
New site from Gitとかそんな感じのボタンから当該リポジトリを追加
3. Can’t see your repo here? Configure the Netlify app on GitHub.とか書いてあってリンクになってるのでそこから結び付けたいリポジトリを許可する手順も必要。
4. あとはよしなに - 完了的なのがでるので、以下の場所の矢印のとこをクリックするとVueのサンプル画面がでる。ここまででサイトのデプロイはOK。
次にFunctionsを設定するまで。
- コンソールに戻って、
$ cd my-application $ vue add netlify-lambda-
package.jsonのbrowserslistから"not dead"の行を削除。←後述のエラーが出たので。 $ npm run build && npm run serve- ブラウザで
http://localhost:9000/helloにアクセスするといい感じに見える
- コンソールに戻って、serveをCtrl+cで止める
-
.gitignoreに/lambdaを加える -
netlify.tomlのcommandをyarn buildからnpm run buildにする←デプロイしたときにyarnがないというエラーになったので(汗 $ git add . && git commit -m "add functions" && git push- ブラウザでNetlifyを確認しデプロイ状況を確認。
https://app.netlify.com/sites/Netlify上のアプリ名/deploys -
publishedになったらhttps://Netlify上のアプリ名.netlify.app/.netlify/functions/helloにアクセスしてみる。ローカルでみたハロワ的なメッセージでたら完了、おつかれさんでした。
よくわからん現象ズ
ビルドエラー
BrowserslistError: [BABEL] /opt/build/repo/src/lambda/hello.js: Unknown browser query `dead` (While processing: "/opt/build/repo/node_modules/babel-preset-env/lib/index.js")
ローカルでのビルド時に発生したのでpackage.jsonのbrowserslistから"not dead"の行を削除。
それで再実行するとエラーはなくなった。
その後もう一度"not dead"を追加したらエラーでなくなった。
それでpushしたところ、Netlify側でも同様のエラーが出た。（functionsのデプロイが失敗してた）
なのでやっぱり"not dead"を削除してpush。
そしたらNetlify側でもビルド成功した。functionsにもアクセスできるようになりました。