Svelte + Vercel 爆速でサイトを公開する

[Ateam Brides Inc. Advent Calendar 2020](https://qiita.com/advent-calendar/2020/ateam-brides)の5日目は
株式会社エイチームブライズ サイト開発部 20卒エンジニアの@takaHALが担当します！

# はじめに

Vercelというホスティングサービスを使って、Svelteで構築したサイトをサクッと公開する方法を紹介します。
**NetlifyとGithub**を連携させて普段サイトを作ってる人にも是非Vercelを触ってみてもらいたいです。

# やること
- Svelteのプロジェクト作成
- Vercelへデプロイ
    - Vercel上での操作
- Github上での操作

# 前提
- Svelte、Vercel自体の詳細の紹介しません
- サクッとサイト公開をしたい人に向けてSvelteを例に紹介します
- Github+Vercelでサイトを公開します。Githubのリポジトリを作成してください
- Gitを使ったことがある

## Svelteのプロジェクト作成

[Svelte quickstart](https://svelte.dev/blog/the-easiest-way-to-get-started#2_Use_degit)

```bash
$ npx degit sveltejs/template svelte_test
$ cd svelte_test
$ npm install
$ npm run dev
```

サイトが見えればヨシ!
作成したものをGithubにpush してください。

今回作成したリポジトリ
https://github.com/takaHAL/svelte_test

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/c3d10db8-1ed4-d466-2dfd-9a257ccb3255.png)


![スクリーンショット 2020-12-03 0.18.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/79889030-782b-26f0-4c44-f8b8afd9292e.png)


## Vercelへデプロイ

プロジェクトを作成したので実際にVercelとGithubに作成したリポジトリを連携させましょう

### Vercelにログイン or 新規登録

https://vercel.com/

![スクリーンショット 2020-12-03 0.26.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/1a5036c2-eef4-a0fe-518e-49c10c1e8be1.png)

- 登録はGithubのアカウントを使ってできるので連携させましょう

![スクリーンショット 2020-12-03 0.27.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/83ceabea-f484-df74-3592-717a6891528c.png)

### デプロイするプロジェクトを選ぶ

- `Import Project`を選択


![スクリーンショット 2020-12-03 0.40.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/57a73707-8ea3-3054-0e6d-66e4fa8b73ab.png)


- `Import Git Repository`を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/7b799952-8a27-df0f-cb0b-6d1717823531.png)

- 自分のデプロイしたいリポジトリのURLを入れる

![スクリーンショット 2020-12-03 0.55.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/85ad3a57-9bf8-4159-2f3c-add2e258fa63.png)

### デプロイ時の設定

- プロジェクト名
- ビルドする時のコマンド
- 環境変数

を設定できます。

コマンドに関しては `FRAMEWORK PRESET`の部分で自分の使っている
 VueやSvelteを選ぶとデフォルトのビルドコマンドが入ってくるので変えたい等なければ触らなくて大丈夫。
そのままデプロイボタンを押しましょう

![スクリーンショット 2020-12-03 0.59.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/9f6c57c7-afde-9481-d1f0-c66fde2675e5.png)

**やったぜ！！デプロイ完了**
爆速ビルド！！
Vercel君もホメてくれてます

[デプロイ先](https://svelte-test-dun.vercel.app/)

![スクリーンショット 2020-12-03 1.14.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/bd293ec1-d47e-0cf3-8491-47fbc34f4884.png)


## サイトを更新したい!!

毎回手動でデプロイするのめんどくさいですよね？？
安心してください Vercel　ならpushだけでできます！！！！

### プルリクエストを出す

- ソースを変更後push

![スクリーンショット 2020-12-03 1.26.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/c6c90461-23c3-9e87-f79a-82e0703fc366.png)



![スクリーンショット 2020-12-03 1.27.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/201e6e15-da9d-83cc-8a26-e161ff8e883a.png)

チーム開発ならここでレビューとかをしてもらうと思うのですが、なんとプルリクを出すとプレビュー環境のURLが作成されレビュワーがプレビュー環境での確認をすることができます。

![スクリーンショット 2020-12-03 1.28.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/2fdc5ec7-b693-dd36-52ea-3fe6dbc0b4ca.png)


レビュー終了後、本番のブランチにマージすると本番環境に自動でデプロイされます。

![スクリーンショット 2020-12-03 1.47.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/af341b4a-1dca-5949-39d3-228aa93c2c0b.png)


Vercelの本番へのデプロイなのですが、
最初にビルド→成功→`Production`にデプロイとなるので 本番にマージしてプレビュー環境でビルド失敗すると本番に反映されないのでそこもいいところだなと感じました。

![スクリーンショット 2020-12-03 1.50.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/b392e969-35ae-5e0c-c437-82fd4177bc83.png)

# まとめ

**Vercelはいいぞ！！**

- デプロイが簡単
- ビルドが早い
- プレビュー環境を用意してくれる
- Netlify も　Vercelもどっちも英語なので　ちょっとて思う人もいるかもしれないけどUIがシンプルなので使いやすい

記事の内容とは違うのですが、Vercelで Basic認証も無料枠のプランでも実現できますし、
ビルド→デプロイ用のhook URLも作成することができます。
例えばmicroCMSなどで記事を更新したタイミングでサイトを最新の状態にビルド＆デプロイすることもできますね。
[Deploy Hooks - Vercel Documentation](https://vercel.com/docs/more/deploy-hooks)

Next.js + Vercelを使うことで画像の最適化など面白い機能が使えるみたいなので次回はVercel + Next.jsで遊ぼうと思います。
[Built-in Image Component and Automatic Image Optimization](https://nextjs.org/blog/next-10#built-in-image-component-and-automatic-image-optimization)

Vercelを使い始めて浅いのでオススメのVercel活用例などありましたらコメントしてください！
記事を読んでいただきありがとうございました。
今日は12月5日なので実質クリスマスですね楽しい休日を。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/63bc9b07-ca44-0059-5eed-0e003b9916ae.png)

[Ateam Brides Inc. Advent Calendar 2020](https://qiita.com/advent-calendar/2020/ateam-brides)の6日目は、
@mkin がお送りします！！どんなネタを用意してくるのか楽しみです！！