Vercelとfreenomでvue.jsで作ったサイトを独自ドメインで公開する

### 概要
Vue.jsで作成してVercel（旧now）とfreenomで独自ドメインのサイトを作るというものです。
他で作った猫カメラの写真がGyazoにたまっているので、GyazoのAPIを使ってWEBサイト（Vue.js）でもみれるというものです。
### できたもの
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">vue.jsでnekoBotで表示する写真をパラパラと見れるものを作った。<br>Deployしたら動かなくなったけど。。。<a href="https://t.co/ifiicmRP6b">https://t.co/ifiicmRP6b</a><a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://t.co/bzu9fOOGHg">pic.twitter.com/bzu9fOOGHg</a></p>&mdash; 3yaka (@3yaka4) <a href="https://twitter.com/3yaka4/status/1263088592185778179?ref_src=twsrc%5Etfw">May 20, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
2020/05/23 
動いたのでソースコード修正しました！！！

### 環境
```
macOS Catalina 
Visual Studio Code 1.45.1
Node.js: 12.8.1
```
### 構成
```
api(vercelはapiフォルダにメインで使うJSをいれるらしい)
 - server.js
public（staticファイルはpublicフォルダの中へ）
 - index.html
 - style.css
package.json
vercel.json
package-lock.json
node_modules
```


### コード
```html
<html>
  <head>
    <title>Hello My WebSite!</title>
    <link rel="stylesheet" media="all" href="style.css">
  </head>
  <body>
    <div id="app" class="waku">
    <h1>3yakaさん家のにゃんこはなにしてる？</h1>
    <p>猫カメラが撮った写真の最新１０件がランダムに表示されるよ</p>
    <button id="testbutton" v-on:click="getData()"></button>    
       <p class="mes"> {{ message }}
        <img class="imgsiz" v-bind:src="src" /><!-- データバインディングの場合はカッコをくくらなくて呼び出せます -->
      </p>
      </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                src:'https://i.gyazo.com/9360a06096a20ab93a79a4793f7670dd.jpg' 
            },
            methods: {
               getData: async function(){
                  let e;
                    const response = await axios.get('/api')
                    for (var i = 0 ; i < 9 ; i++){
                        e = Math.floor(Math.random () * 10);
                    }
                    const date = new Date(response.data[e].created_at);
                    let datef = date.toLocaleString();
                    this.message = `この写真を撮った時間は${datef}だよ`;
                    this.src = response.data[e].url; // 取得した画像差し替え
                    console.log(response.data[e].url);
                },
            },
            mounted: function(){
                this.getData();
            }
        })
    </script>
  </body>
</html>
```
```node.js
const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;

const Gyazo = require('gyazo-api');
const gyazoclient = new Gyazo('***');
// axiosライブラリを呼び出す
const axios = require('axios');

// ローカルでもサーバー上でもみれるようにする
app.use(express.static(__dirname + '/../public'));
app.get('/api', async function(req, res) {
  let response;
  try {
    response = await gyazoclient.list();   
  } catch (error) {
    console.error(error);
  }
  //結果をJSONに割り当てる
  res.json(response.data);
});
//vercelでかきかた
(process.env.NOW_REGION) ? module.exports = app : app.listen(PORT);
console.log(`Server running at ${PORT}`);

```
vercel特有のフォルダ構成とかに悩まされた

## 参考サイト
[爆速！Vercelとfreenomで独自ドメインのサイトを無料で作成する \- Qiita](https://qiita.com/n0bisuke/items/901154531ea14f978bd4)