NetlifyにVue-cliで作ったサイトをデプロイする

コードVue.js/Nuxt.js

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の方も更新されるのでブラウザからアクセスして正しく表示されるか確認してください。

ビスケットを送る
0

コメント

スポンサーリンク
スポンサーリンク
タイトルとURLをコピーしました