NetlifyにVue-cliを使って作ったサイトをデプロイする方法を紹介します。
build
はじめにVue.jsのアプリをビルドします。
npm run build
デプロイにはgitのリポジトリが必要なのでビルドで生成されたdistフォルダの中身をgithubなどのリポジトリにpushしておきます。
デプロイ
はじめにnetlifyのアカウントを作成します。
New Site from gitというボタンが出てくるのでクリックします。
Githubなどのアカウントと連携するボタンが出てくるのでクリックして連携します。
連携すると自分のgitのリポジトリが表示されるのでデプロイしたいリポジトリを選択してDeploy Siteをクリックします。
生成したURLにアクセスして表示できていれば成功です。
rewriteの設定
SPAアプリなどフロントエンドでルーティングをしている場合設定をしないと直接URLを入力してアクセスした際に404エラーが出てきます。
index.htmlがあるディレクトリに「_redirects」という名前のファイルを作成して次のように書きます。
/* /index.html 200
保存してgitにpushすると勝手にnetlifyの方も更新されるのでブラウザからアクセスして正しく表示されるか確認してください。
コメント