Web開発の雰囲気

• Web開発の雰囲気
  • コミュニケーションの確保
    • Google Meet
    • Slack
  • 開発環境の準備
    • WSL2
    • Ubuntu 20.04 LTS
    • VS Code
    • Rust
    • Elm
    • sass
    • PostgreSQL
  • アプリを動かす
    • Sprig ソースコードの入手
    • 環境変数の注入
    • /web コンパイル
    • /api コンパイル
    • /api データベースの準備
      • 起動と作成
      • マイグレーション
    • アプリ起動
  • 改造してみる
    • /web フロントエンド
    • /api バックエンド

コミュニケーションの確保

Google Meet

• 通話と画面共有のため

Slack

• テキストチャットのため

開発環境の準備

WSL2

Ubuntu 20.04 LTS

VS Code

Rust

cargo --version

cargo 1.55.0 (32da73ab1 2021-08-23)

Elm

elm --version

0.19.1

sass

curl -L -o sass.tar.gz https://github.com/sass/dart-sass/releases/download/1.42.1/dart-sass-1.42.1-linux-x64.tar.gz

tar -zxvf sass.tar.gz dart-sass/sass

sudo mv dart-sass/sass /usr/local/bin/

sass --version

1.42.1

rm -r dart-sass sass.tar.gz

PostgreSQL

• ステップ1 のみ

アプリを動かす

Sprig ソースコードの入手

cd ~

mkdir works

cd works

git clone -b intro --recurse-submodules https://github.com/s8sato/sprig.git

code sprig

環境変数の注入

cd ~/works

git clone https://github.com/s8sato/intro-dev-web.git

mv intro-dev-web/init.local.sh sprig/

cd sprig

bash init.local.sh

/web コンパイル

cd ~/works/sprig/web

sass src/scss/style.scss style.css

elm make src/Main.elm --output=elm.js

/api コンパイル

cd ~/works/sprig/api

sudo apt install build-essential pkg-config ca-certificates libssl-dev libpq-dev

cargo build

/api データベースの準備

cd ~/works/sprig/api

起動と作成

sudo pg_ctlcluster 12 main start

sudo -u postgres createdb sprig_my

sudo -u postgres psql sprig_my

ALTER USER postgres WITH PASSWORD 'postgres';

\q

マイグレーション

cargo install diesel_cli --no-default-features --features postgres

diesel migration run

アプリ起動

cd ~

mv works/intro-dev-web/sprig.sh .

bash sprig.sh

http://localhost:8000/index.html

改造してみる

/web フロントエンド

• ロゴを入れる

/api バックエンド

• /coffee コマンドの応答メッセージを変更