【Netlify】デーサイがNetlifyを試してみる

# はじめに
普段はデータサイエンティスにしか興味のない私ですが、仕事でアプリ開発プロジェクトのリーダーに任命され、その引き合いで友人のアプリ開発を手伝うチャンスを頂いたので、デモアプリを作ってみようと思いました。頼りになるエンジニアの協力の元、NetlifyというWebアプリケーション開発プラットフォームを使用し、デモアプリを作る事にしました。開発ど素人なのでまずは自分のできる範囲から手を出していき、Qiitaにまとめながら、Webアプリ開発に慣れていこうと思っています。今回はその初回として、Netlifyの使いかをまとめたいと思います。

# Netlify
> Netlifyはサンフランシスコをベースとするクラウドコンピューティングの企業である。静的ウェブサイトのためのホスティングサービス（英語版）とサーバーレスのバックエンドサービスを提供している。
グローバルなアプリケーション配信ネットワーク（英語版）を介したGitからの継続的デプロイ、サーバーレスのフォームハンドリング、AWS Lambda functionsのサポートLet's Encryptとの完全な統合を特徴としている。無料プランと有料プランを提供している。
Netlifyのユーザーとしては、Google、Facebook、Verizon、NBC、Samsung、Cisco、Atlassian、Vue.js、Citrix、Peloton（英語版）、Kubernetes、Lodash（英語版）、Smashing Magazine（英語版）、Sequoia Capitalなどがいる。- [wikipedia](https://ja.wikipedia.org/wiki/Netlify)

今回は、先輩エンジニアが後輩エンジニアに教えていたデモアプリの作り方を見様見真似で、遠い記憶を呼び起こしながら真似してみます。

# 作業の流れ
作業の流れとしては以下の様に進めていきたいと思います。
1. Netlifyでデモサイトをデプロイする・GitHubにソースコードをクローン
1. クローンしたソースコードをローカルで編集しコミット
1. GitHubでマージし、編集が反映されているか確認

# 1.  NetlifyでデモサイトをデプロイしGitHubにソースコードをクローン
### アカウント作成
はじめにNetlifyの[HP](https://www.netlify.com/)へ行き、アカウント作成をします。特に気にすることはないのですが、後々GitHubのアカウントと連携させるので特別な理由が無ければGitHubのアカウントを使用してアカウントを作成しましょう。
![Screenshot 2023-01-14 at 18.42.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1044781/37bb8c92-1a18-f790-d631-591deed3f1c1.png)

### デモサイトデプロイ
次に`Start from a tmplate`をクリックし、デモアプリをデプロイします。今回は最もシンプルであろう`Solid Quickstart`を選択しデプロイします。
![Screenshot 2023-01-14 at 17.35.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1044781/b972994b-097f-5ea9-386d-d5f563fba7c7.png)

![Screenshot 2023-01-14 at 17.35.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1044781/fd2a8031-074b-cc32-c2b4-febe8dad62d9.png)

`GitHub`を選択し、リポジトリを指定しクローンを作成します。
![Screenshot 2023-01-14 at 18.50.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1044781/ba2b6baf-dd18-b985-fa62-30006be8d477.png)

特に何も変更せずに`Deploy site`をクリックします。これでNetlifyの方の操作は終わりです。
![Screenshot 2023-01-14 at 17.36.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1044781/9d3b0f29-6fdb-9e41-74ec-eaddac98efca.png)


サイト一覧に先ほどデプロイしたサイトのURLが載っているのでデプロイできているか確認してみてもいいでしょう！
→https://animated-phoenix-bd8d47.netlify.app/

![Screenshot 2023-01-14 at 18.55.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1044781/49e7ff55-901a-26c3-9e85-54c7efdcb015.png)
`HELLO WORLD!`の文字と`Clicks:`のボタンがあり、ボタンをクリックすると数字が1づつあがっていくサイトの様です。
![Screenshot 2023-01-14 at 18.57.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1044781/0832af41-8300-2fac-9758-aee13baff0cb.png)

### 2. クローンしたソースコードをローカルで編集しコミット

GitHubにデモサイトのソースコードがクローンされている事を確認します。
![Screenshot 2023-01-14 at 17.38.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1044781/ccf5c410-ac82-8a0b-c066-c37b4fff72cb.png)

`solid-quickstart`リポジトリの`src/components/Counter.tsx`を開きます。`Counter`ファンクションを少しいじってみます。とりあえず、1クリック毎の上昇数を1から100に変えてみます。

```js
import { createSignal } from "solid-js";
import "./Counter.css";

export default function Counter() {
  const [count, setCount] = createSignal(0);
  return (
    <button class="increment" onClick={() => setCount(count() + 1)}>
      Clicks: {count()}
    </button>
  );
}
```

GitHubよりリポジトリをクローン。
![Screenshot 2023-01-14 at 19.16.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1044781/a4d395b3-4892-bd07-16ff-5f26895c6794.png)

Sourcetreeを開き、`New` → `Clone form URL`を選択し、クローン先を指定し実行します
![Screenshot 2023-01-14 at 19.16.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1044781/28605537-94c0-3e92-399f-325382884a5a.png)

ローカルにクローンできたので`Counter.tsx`を編集します。
![Screenshot 2023-01-14 at 19.18.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1044781/4ee4311e-34a7-1022-6f37-f700eede19d8.png)

`setCount(count() + 1)`を`setCount(count() + 100)`に変更して保存します。
```js
import { createSignal } from "solid-js";
import "./Counter.css";

export default function Counter() {
  const [count, setCount] = createSignal(0);
  return (
    <button class="increment" onClick={() => setCount(count() + 100)}>
      Clicks: {count()}
    </button>
  );
}
```

変更を保存してコミットをプッシュします。
(SorcetreeとGitHubの連携方法はこちらの記事が参考になりました。[SourceTreeの使い方 GitHubとの連携方法](https://ics.media/entry/15195/) by 株式会社ICS 野原 のぞみさん)
![Screenshot 2023-01-14 at 19.22.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1044781/3fac5670-274f-81dc-572b-a825292368be.png)


### 3. GitHubでマージし、編集が反映されているか確認

プッシュされたコミットをGitHub上でマージし、Netlifyのサイト概要のページに飛ぶと、`Production deploys`にコミットの反映状況がわかります。これが`Published`ステータスになっていれば変更が反映されます。(1~3分程度でパブリッシュされました)
![Screenshot 2023-01-14 at 19.32.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1044781/3d137ba2-9c8d-2eaf-c139-3749949fd8e5.png)

100単位でのクリックが可能に！
![Screenshot 2023-01-14 at 19.36.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1044781/6e1f4843-12f2-a17b-9c73-5e4fd5508f81.png)



# 終わりに
開発ど素人の私ですが、特に詰まる事なく変更をデプロイできました。Netlifyでデモアプリ/Web開発の参考になればと思います。リポジトリにデータ(csv?json?db?)があればそのファイルを参照する事もできるらしいので、次回はそれに挑戦してみたいと思います。