LoginSignup
3
0

More than 3 years have passed since last update.

vue cli, Netlify, Functionsの初期設定

Last updated at Posted at 2020-12-27

vue-cliでアプリ作ってGitHubにおいてNetlifyに上げる。Fuctionsも使いたい。そんな備忘録。
環境はWin10上でWSL2(Ubuntu)です。

Vue CLIのインストール

  1. $ sudo npm install -g --force @vue/cli
    1. いつのだかわからないvue-cliが入ってたので、--forceで上書き

メイン画面をNetlifyに上げるまで

  1. $ vue create my-application
  2. $ cd my-application
  3. ブラウザでGitHubにリポジトリ作成(README.mdの自動生成とかはしなかった。vue cliのと被るし。)
  4. my-applicationディレクトリ直下で以下を実施(GitHubの画面に表示されいる通りに実施。mainブランチにするような手順になってたがmasterのままにした。)
    1. $ git remote add origin git@github.com:<アカウント名>/<リポジトリ名>.git
    2. $ git push -u origin master
  5. ブラウザでNetlifyでNew site from Gitとかそんな感じのボタンから当該リポジトリを追加
    1. Can’t see your repo here? Configure the Netlify app on GitHub.とか書いてあってリンクになってるのでそこから結び付けたいリポジトリを許可する手順も必要。
    2. あとはよしなに
  6. 完了的なのがでるので、以下の場所の矢印のとこをクリックするとVueのサンプル画面がでる。ここまででサイトのデプロイはOK。 image.png

次にFunctionsを設定するまで。

  1. コンソールに戻って、$ cd my-application
  2. $ vue add netlify-lambda
  3. package.jsonbrowserslistから"not dead"の行を削除。←後述のエラーが出たので。
  4. $ npm run build && npm run serve
  5. ブラウザでhttp://localhost:9000/helloにアクセスするといい感じに見える image.png
  6. コンソールに戻って、serveをCtrl+cで止める
  7. .gitignore/lambdaを加える
  8. netlify.tomlcommandyarn buildからnpm run buildにする←デプロイしたときにyarnがないというエラーになったので(汗
  9. $ git add . && git commit -m "add functions" && git push
  10. ブラウザでNetlifyを確認しデプロイ状況を確認。https://app.netlify.com/sites/Netlify上のアプリ名/deploys
  11. 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.jsonbrowserslistから"not dead"の行を削除。
それで再実行するとエラーはなくなった。
その後もう一度"not dead"を追加したらエラーでなくなった。
それでpushしたところ、Netlify側でも同様のエラーが出た。(functionsのデプロイが失敗してた)
なのでやっぱり"not dead"を削除してpush。
そしたらNetlify側でもビルド成功した。functionsにもアクセスできるようになりました。

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0