【所要時間30m】NetlifyとVue.jsを使ってWebサイトを爆速公開

![VueとNetlify.png](https://qiita-image-store.s3.amazonaws.com/0/234092/d5f63d72-983e-5db1-9cd9-82945a711b50.png)

こんにちは、Ariiのフロントエンジニアのイバラギです。→[@iba_ragi](
https://twitter.com/iba_ragi)

# 概要
今流行りのNetlifyを使ってぱぱっとweb サイト公開したくありませんか？
Netlifyは、エンジニアでなくても、インフラ知識がなくても一瞬で高機能なweb サイトを公開できてしまう優れものです。

今回は自分がただ単に使ってみたかっただけですが、デザイナーや非エンジニアでも、たった1時間で自分のサイトやポートフォリオを公開できることを目的とした記事を書いてみました。

Netlifyを一度使ってみたかったという理由と爆速公開を目的としているので細かい説明は省いてるかもしれませんので、ご容赦ください。

# 使用するもの

- Vue CLI 3.0
一応説明するとjavascriptフレームワークVue.jsの最新版です。
この記事ではhtmlだけでもいいのですが、今後の拡張を考えるならVueは超おすすめです。
ちなみに、自分はVue＋NuxtでのSSRやPWAを得意としてます。

- Netlify
この記事でお伝えしたいメインサービス。
優れたUXを持つホスティングサービス（らしい）
無料のSSL化（デフォルトでhttpsらしい）

いい感じに資金調達も出来てるみたいなので、今後も期待。

# ストップウォッチのスタート
## Vueのセットアップ(15分)

インストールしてない方はインストールしてしまいましょう。
npmまたはyarnをインストールされてない方は各自インストールしてください。

```sh
$ npm install -g @vue/cli         // or yarn global add @vue/cli
$ npm install -g @vue/cli-service-global
```
　　
次に公開するプロジェクトを作成し、ビルドし、zipファイルとして圧縮します。
test-site.zipというzipファイルが作成されますので早速これを公開しましょう！

```sh
//　プロジェクト生成
$ vue create test-site            
//　いくつか質問された場合はとりあえずenterを押しておきましょう

//　ビルド
$ yarn build

// test-site配下に作成された、distというディレクトリをまとめて圧縮
$ zip -r test-site.zip test-site/dist  
```

↑質問の返答次第でlintツールを選べたり、typescriptを導入してくれたりします。



## 公開する前にlocalで確認(Option)

ちなみにこのデフォルト状態を確認したい場合は下のコマンドでポートが開きますので、ローカルホストで確認できます。

```sh
$ yarn serve
```

自分の場合は8082番ポートが開きましたが、デフォは8081かも
http://localhost:8082/
などでお試しください。

## とりあえずデザインを変更したい場合(Option)

デザインをいじりたければ、test-site/src/App.vueをお好きに変更してください。

```test-site/src/App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
```

　　
## Netlifyの登録と公開(15分)
いよいよ公開していきます！

登録は[ここからどうぞ。](https://app.netlify.com/)

マイページに移動すると下の画像のような画面になります。
そこに先ほど作ったzipファイルをここにドラッグ＆ドロップしましょう。
![picture_pc_2bd948877799246c46ee192b711dba53.jpg](https://qiita-image-store.s3.amazonaws.com/0/234092/1e155f09-ecea-4c9b-4a74-db368b099c14.jpeg)


写真右上のNew site from Gitから自分のgithubアカウントのリポジトリを登録するとpushのたびにサイトが動的に変わるようになります。

今回は時間重視のため、zipファイルでやりたいとおもいます。
uploadが済むと設定画面に飛びます。
![picture_pc_d5809c43a08911300a560d234a8548c0.png](https://qiita-image-store.s3.amazonaws.com/0/234092/72eb668e-5f29-e621-8e90-6e0afafc5a71.png)


このURLに注目
![picture_pc_31647cb40552f3571e42e454c00ab382.jpg](https://qiita-image-store.s3.amazonaws.com/0/234092/735c30b0-3c14-5d26-2fc2-009ab1f1d22d.jpeg)

なんとこれだけで自分のサイトが公開出来たんです！！！
もろもろの設定はVueCLIさんがやってくれているので簡単！！
しかもhttps!!

また、Setting→domain managementでドメイン変更や独自ドメインの追加も出来ますし、後からgithubとの連携もできます。

ちなみにgithubと連携する場合の設定内容は↓こんな感じ
![picture_pc_c09cfabbc18f72085fd22494075900b9.jpg](https://qiita-image-store.s3.amazonaws.com/0/234092/f9a617ce-0e65-4f71-3b85-b10d0139bea2.jpeg)

試しに自己紹介サイトを作ってみました。ぜひ参考にしてください！

ちなみにgithubと連携済みなので、pushするたび動的にコンテンツが変わってくれます。
[作ったサイト](https://ibaragi-demopage.netlify.com/)

# 感想
Herokuなどの他サービスに比べると圧倒的にわかりやすい印象。
とにかく、3ステップという明確なフローが定義されているので、作業がしやすいです。

自分のポートフォリオなどを作るときなどにまた使ってみようとおもいます。