概要
LINEで写真を撮るBotがGyazoに写真を溜めていくので、お友達ではない人にも見せられるような簡易なWebサービスをVue.jsで作成してVercelとfreenomで独自ドメインのサイトを作るというものです。
できたもの
vue.jsでnekoBotで表示する写真をパラパラと見れるものを作った。
— 3yaka (@3yaka4) May 20, 2020
Deployしたら動かなくなったけど。。。https://t.co/ifiicmRP6b#protooutpic.twitter.com/bzu9fOOGHg
環境
macOS Catalina
Visual Studio Code 1.45.1
Node.js: 12.8.1
構成
app.js
public
- index.html
- style.css
コード
<divid="app"class="waku"><h1>3yakaさん家のにゃんこはなにしてる？</h1><p>猫カメラが撮った写真の最新１０件がランダムに表示されるよ</p><buttonid="testbutton"v-on:click="getData()"></button><pclass="mes"> {{ message }}
<imgclass="imgsiz"v-bind:src="src"/><!-- データバインディングの場合はカッコをくくらなくて呼び出せます --></p></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>constapp=newVue({el:'#app',data:{message:'Hello Vue!',src:'https://i.gyazo.com/9360a06096a20ab93a79a4793f7670dd.jpg'// 画像のメッセージ初期値},methods:{getData:asyncfunction(){lete;constresponse=awaitaxios.get('/api');for(vari=0;i<9;i++){e=Math.floor(Math.random()*10);}constdate=newDate(response.data[e].created_at);letdatef=date.toLocaleString();this.message=`この写真を撮った時間は${datef}だよ`;this.src=response.data[e].url;// 取得した画像差し替えconsole.log(response.data[e].url);},},mounted:function(){this.getData();}})</script>node.js
varexpress=require('express');varapp=express();constGyazo=require('gyazo-api');constgyazoclient=newGyazo('***');// public というフォルダに入れられた静的ファイル（HTMLファイル・CSSファイル・ブラウザ上のJavaScriptファイル）はそのまま表示app.use(express.static(__dirname+'/public'));app.get('https://po3-8-vue-d49zw7rgl.now.sh/api',asyncfunction(req,res){letresponse;try{response=awaitgyazoclient.list();}catch(error){console.error(error);}//結果をJSONに割り当てるres.json(response.data);});app.listen(8080);console.log('server start! (po-03-08-web-vue)');//app.listen(process.env.PORT || 8080);上記でローカルのサーバーだと動くけどVercellにDeployするとapiが読めないと返ってくる。
vercelから出るIntended Nameserversの番号が4日くらい前にProtoOut Studioでやったときとだいぶ違う感じになってた。
a.zeit-world.co.uk
c.zeit-world.org
e.zeit-world.com
f.zeit-world.net
これが、こんな感じに
ns1.vercel-dns.com
ns2.vercel-dns.com
きっと色々変更中なんだろうな、、、now.shからvercelってだいぶ違う感じだしな。。。
きっとこれが理由ではないけど、Deployしたらダメになるって辛い。
参考サイト
爆速！Vercelとfreenomで独自ドメインのサイトを無料で作成する - Qiita
感想
久々にコンソールログが真っ赤なサイトを見た。