Vueのプロジェクトを作成し、Netlifyで公開するまで
Vue.jsやってます。今回はVue CLIにてVueのプロジェクト作成し、GitHubにソースアップして、Netlifyでサイト公開するまでの流れをまとめました。
ある程度慣れてくれば、15分くらいでできるのではないかと思います。
前提
・Vue.jsの知識が少しでもあること
・GitHubアカウント持っていること
・Netlifyアカウント持っていること
それでは始めます。
Vue CLIにて Vueのプロジェクト作成
下記にてインストール
npm install -g @vue/cli
プロジェクト作成
vue create project-name
ディレクトリ移動
cd my-project
プロジェクトスタート
npm run serve
これでvueが立ち上がる。
↑の場合。『http://localhost:8081/』にアクセスするとVueの画面が開きます。
以上です。
参考:
GitHubにソースアップ
作成したVueのソースをGitHubにアップします。
GitHubにログインし、新しいリポジトリを作成します。
リポジトリ名を入力し、「Create repository」をクリックします。
コマンドラインでVueのプロジェクトに移動し、下記実行します。
echo "# newrepository" >> README.md
git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/KoushiKagawa/newrepository.git
git push -u origin master
これでGitHubに新しいリポジトリが作成され、ファイルがアップされました。
以上です。
参考:
Netlifyでデプロイ
ここからはNetlifyにログインしていること前提で進みます。
「New site from Git」をクリックします。
「Continuous Deployment」より「GitHub」をクリックします。
連携可能なリポジトリが表示されるので、連携するGithubを選択します。
デプロイ設定画面が表示されます。
今回は下記の通り設定しました。
Branch to deploy:master
Build command:npm run build
Publish directory:dist
設定完了したら「Deproy site」をクリックします。
以上で対応完了です。初回はビルドに時間がかかるので、完了するまでしばし待ちます。
完了すると、URLが発行されるのでクリックするとサイトが表示されます。
以上です。
今後は、Githubでmasterブランチにpushされると自動でNetlifyにデプロイされます。
参考:
ということで以上です。GitHub Pagesでのデプロイも楽でしたが、Netlifyもめちゃめちゃ楽でした。
お疲れ様でした😃
併せて読んでほしい↓
読んでいただきありがとうございます。