LoginSignup
2

More than 1 year has passed since last update.

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

Last updated at Posted at 2020-05-20

概要

Vue.jsで作成してVercel(旧now)とfreenomで独自ドメインのサイトを作るというものです。
他で作った猫カメラの写真がGyazoにたまっているので、GyazoのAPIを使ってWEBサイト(Vue.js)でもみれるというものです。

できたもの


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>
  <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>猫カメラが撮った写真の最新10件がランダムに表示されるよ</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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2