Zenn
🦕

Gitpodでdenoの環境をつくってみたお話

2023/09/05に公開
JavaScript
TypeScript
Deno
Gitpod
tech

つい先日SVGでお絵描きする機会がありまして、それでDenoくんの絵描き歌を思い出したんです

ゔぇ〜じぇか〜ぶ〜ぅ〜♬ゔぇ〜じぇか〜ぶ〜♬ってやつ
いつみた記事かと思って探せば2019年の12月ですって
当時は絵描き歌でヴェジェ曲線を使うことをゴリ押ししてる様に笑った記憶があります

とはいえ、denoを触ったことないのにネタだけこすっているのもなんか違うなということで、gitpodでdenoのサーバーを立てて、ハローワールド的なことをするまでやってみた。そんな記事

そもそもDenoとは

Node.jsの作者が、Node.jsのよくない部分を改善して作ったサーバーサイドでのJavaScriptの実行環境のこと

Node.jsのすごい版。実行環境なので、.jsファイルを.pyみたいに実行できるようだ。なるほど
マスコットの恐竜はかわいい系。雨に打たれるアンニュイなかわいい系

このサーバーサイドで動かすJavaScript環境を、Gitpodで作ってなんか動かしてみよう

gitpodで Denoを実行する

gitpodの標準のコンテナにDenoをインストールするための設定ファイルはこんな感じ
Denoのコンテナを持ってきて展開するより、gitpod標準コンテナを開いてDenoに必要なファイルをインストールしたほうが、起動するまでが速かったのでこの方式で環境を作ります

ports:
  - port: 8888
    onOpen: open-preview
tasks:
  - name: install_deno
    before: | 
      curl -fsSL http://deno.land/x/install/install.sh | sh
      export DENO_INSTALL=/home/gitpod/.deno
      echo export DENO_INSTALL=/home/gitpod/.deno >> ~/.bashrc

      export PATH=$DENO_INSTALL/bin:$PATH
      echo export PATH=$DENO_INSTALL/bin:$PATH >> ~/.bashrc
    init: |
      deno upgrade    
    command: |
      deno run source/welcome.ts
      
vscode:
  extensions:
    - denoland.vscode-deno

上から、8888番でポートを開いて、tasksでDenoのインストール、パス通し、アップグレードとwelcome.tsの実行までを行います
実行するとこんな感じ

welcome.tsがconsole.logでがぉーと鳴きました
がぉー。恐竜なので、がぉー

実際に.tsで書いたファイルをCLIチックに動かすことができた。なるほど。これがDenoによる実行環境ということか

Webページのホスティング

さて、Denoを使って.tsファイルをコンソール上で動かすことができたわけだけれども、実際にWebページとして公開させるにはserveライブラリが必要らしい
Pythonでいう、flaskのイメージ

インポートの仕方はこう

import { serve } from "https://deno.land/std@0.50.0/http/server.ts";

importのあとにパスを入れてモジュールを持ってくる。下手にインストール用のコマンドとか打たなくていいわけだ
この中身で何やってるのかちゃんとわかる具合、好き

インポートした後はポートを開いて、非同期にリクエストを処理していく関数を記述するわけだ

const server=serve({port: 8888});

let cnt=0;
for await (const req of server){
    cnt+=1
    console.log(cnt)
    console.log("127.0.0.1:8888")
    req.respond({body: `<h1>がぉー、Deno!</h1><p>更新カウント: ${cnt}</p>`});
}

このコードでは、サーバーにリクエストがあるたびにcntを+1していってサーバーサイドで動いていることを確認しながらがぉーと鳴いている
実際に作ったhello_http.tsファイルを以下のコマンドで実行させた

deno run --unstable --watch source/hello_http.ts

変数cntが、コンソールから描画に渡されて、更新するたびにカウントが増えていった
なるほど、これがサーバーサイドでのjsか

おわりに

サーバーサイドでのjs実行環境のDenoをGitpod上に作ってみたのが今回のおはなしでした
gitpod、これ一回だけ設定ファイル作るだけで同じ設定のワークスペースをいくつも作れるの、単純に偉いなて思ったりする
環境構築の差で動く動かない問題あるうえに妙に時間がかかる問題を打破したいと思う今日この頃でした

おまけ

冒頭で紹介した記事の絵描き歌に沿って15分で描いたDenoくん.svg
なお、CSSでなんかはしていない

Discussion