GitHub Registryが使えるようになったので、Next.jsのDocker imageをPushしてみたヘ(^o^)ノ
GitHubからWelcome to the beta of GitHub Package Registryメールが来たので試してみた
GitHub Package Registryにpushできるものは ↓ リンクを参照してください
今回はNext.jsのDocker imageをGitHub Package Registryにpushしてみました
サンプルコードはこちら
/packages にアクセスすると、パッケージ一覧が確認できます！
Next Actionとしては、GitHub Actionsを使ってAuto Deployできるようにしようかなー
ちょっと気になるのが、Betaだからなのか、僕のネットワークがクソなのかわかりませんが、no such hostなるエラーがちらほら出ました、、
サンプルコードはPublicですが、もちろんPrivateリポジトリでも利用できます！（これはめっちゃいい！！！！
Privateリポジトリの場合は、writeはもちろんread時もaccess tokenが必要になるのでお気をつけを
この辺 ↓ を参考に設定すれば大丈夫かと思います
Enjoy GitHub Package Registry ヘ(^o^)ノ
Docker Container上のNext.js with TypeScriptなAppをVSCodeでDebugする
Docker containerで動作しているNext.jsをVSCodeでDebugしてみました
サンプルコード
Requirements
- Docker
- Docker Compose
インストールはこの辺を参考に ↓
Docker
開発用のDockerfileを作成
Dockerfile
FROM node:12.10-alpine WORKDIR /home/app USER node EXPOSE 3000
Docker Compose
まずは、Node開発環境をととのえる
docker-compose.yml
version: '3.7' services: node: &node build: context: . volumes: - .:/home/app runner: <<: *node command: /bin/sh
Node.jsのベースと開発用のServiceを作成する
できたら、開発用のコンテナを起動しよう
$ docker-compose run --rm runner Creating network "example-next-typescript-with-vscode_default" with the default driver /home/app $
Next.js
起動できれば、Next.jsとTypeScriptをインストールしていく
$ npm install next react react-dom $ npm install -D typescript @types/react @types/node
package.json
{ ... "scripts": { "dev": "next", "test": "echo \"Error: no test specified\" && exit 1" }, ... }
Homeページを作る
pages/index.tsx
// pages/index.tsx function Home() { return <div>Welcome to Next.js!!!!</div>; } export default Home;
Next.jsを起動すると、tsconfigとか諸々作成されます
$ npm run dev
起動できました！本題のDebugいってみよう
Node.js Inspector
Node.jsは --inspect オプションを追加すると、デバッグクライアントをリッスンしてくれます
環境変数でオプションを指定します
FYI: nodejs.org
Inspect用のnpm scriptを追加します
package.json
{ ... "scripts": { "dev": "next", "dev:inspect": "NODE_OPTIONS='--inspect=0.0.0.0' next dev", "test": "echo \"Error: no test specified\" && exit 1" }, ... }
↑ ここのドキュメントにも書いてますが、inspectのデフォルトは 127.0.0.1:9229 です
今回はNext.jsをDocker Containerで起動させて、ホスト側のVSCodeから接続したいので、ホストを 0.0.0.0 に変更してます
docker-composeの設定も変更します
docker-compose.yml
version: '3.7' services: node: &node build: context: . volumes: - .:/home/app runner: <<: *node command: /bin/sh server: <<: *node ports: - 3000:3000 - 9229:9229 command: npm run dev:inspect
Serverというサービスを追加しました
作業しているコンテナから抜けて、containerを起動します
$ docker-compose up
docker-composeの環境変数にセットしてみたけど、Node.jsでコンフリクトしてるのか起動できなかった
Starting example-next-typescript-with-vscode_node_1 ... done Recreating example-next-typescript-with-vscode_server_1 ... done Starting example-next-typescript-with-vscode_runner_1 ... done Attaching to example-next-typescript-with-vscode_runner_1, example-next-typescript-with-vscode_server_1, example-next-typescript-with-vscode_node_1 server_1 | Debugger listening on ws://0.0.0.0:9229/136aaa58-2624-4587-8f5f-45e7234c9610 server_1 | For help, see: https://nodejs.org/en/docs/inspector example-next-typescript-with-vscode_runner_1 exited with code 0 server_1 | server_1 | > app@1.0.0 dev /home/app server_1 | > next dev server_1 | example-next-typescript-with-vscode_node_1 exited with code 0 server_1 | Starting inspector on 0.0.0.0:9229 failed: address already in use server_1 | npm ERR! code ELIFECYCLE server_1 | npm ERR! errno 12 server_1 | npm ERR! app@1.0.0 dev: `next dev` server_1 | npm ERR! Exit status 12 server_1 | npm ERR! server_1 | npm ERR! Failed at the app@1.0.0 dev script. server_1 | npm ERR! This is probably not a problem with npm. There is likely additional logging output above. server_1 | server_1 | npm ERR! A complete log of this run can be found in: server_1 | npm ERR! /home/node/.npm/_logs/2019-09-08T14_07_48_368Z-debug.log example-next-typescript-with-vscode_server_1 exited with code 12
VSCode debugging
{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "name": "Docker: Next.js", "type": "node", "request": "attach", "remoteRoot": "/home/app", "protocol": "inspector" } ] }
VSCodeのDebugから、Docker: Next.js を実行します
pages/index.tsx にブレイクポイントをおくと止まってくれるはずです
Enjoy Next.js ヘ(^o^)ノ
GR-CITRUS ミニハッカソン in OSAKA に審査員として参加した
GR-CITRUS ミニハッカソン in OSAKA に審査員として参加してきました
IFTTTを使ったIoTなものから、アイディア満載の作品などどれもレベルが高かったです！
個人的にもいい刺激をいただきました！
でもね、スタッフとか審査員とかで参加した場合、みなさんが楽しそうに作業してるのみてムズムズするわけで、、
てなわけで、僕もLチカにチャレンジしました
GR-CITRUSのLEDをチカチカさせてみます
@kimu_shu さんが作られた Rubic を使っていざ！
サポートしてくれたのは @ogomr さんと @kimu_shu さん（豪華！
Rubicはよくできていて、ボードやファームウェアなんかをポチポチ選択していくと実行環境ができちゃいます！
以下、個人的なメモ
Rubicを追加する
- vscodeで
Ctrl + P ext install kimushu.rubicを入力してEnter- インストールが終了したら
reloadする
Rubicの設定
- vscodeで
F1 rubicで検索Show Rubic board catalogを選択
ボードを選択
GR-CITRUSを選択
ファームウェアのリポジトリを選択
Wakayama.rbのリポジトリですね
ファームウェアを選択
- 最新のv2.40を選択 (ハッカソン当日リリースされた！
Configuration
LチカなんでミニマムでOK
ファームウェアの書き込み
ここでデバイスが表示されるはずが、、されてない
@kimu_shu さんに聞いてみると、パーミッションじゃないかなとのこと！
僕の環境はLinuxだったので、デバイスファイルに read, write 権限が必要みたいです
なので以下はLinux環境のみ作業が必要
GR-CITRUSは ttyACM0 ってなファイル名らしいので
$ ls /dev/ttyACM* /dev/ttyACM0 $ sudo chmod 666 /dev/ttyACM0
でも、デバイスを外すとパーミッションが元にもどっちゃうのでめんどくさいから
# /etc/udev/rules.d/50-udev-default.rules ERNEL=="ttyACM[0-9]*", GROUP="murajun1978", MODE="0666"
ってしておくと抜き差ししても大丈夫!
でわ、ファームウェアを書き込みます
Write firmware to boadをクリック- 確認ポップアップがでてくるので
yesを選択 Push reset button on GR-CITRUSってポップアップがでたら GR-CITRUS のリセットボタンを押すOK pushedをクリック- LEDのチカチカ(ファームウェアの書き込み中）が終わると
OK, confirmedをクリック
コネクションテスト
Test connectionをクリック
テスト成功のポップアップが表示されたら終了
これで環境がととのいました！
コードを書く
僕は lchika ってディレクトリ配下にmain.rbを作成しました
# lchika/main.rb class Lchika def initialize(lchika_count) @lchika_count = lchika_count end def run @lchika_count.times do led delay 1000 end end end lchika = Lchika.new(3) lchika.run
実行する
- vscodeで
F5
僕のサンプルだと3回チカチカがするはずです
楽しかった！個人的にはスマートスピーカーを自作してみたいなー
Google AssistantやAmazon Alexaなんかでね
みなさま、お疲れ様でしたー
Rails Follow-up Osaka #13 を開催したヘ(^o^)ノ
rails-follow-up-osaka.doorkeeper.jp
会場提供は株式会社エイチームさんでしたーヽ(´▽｀)/
ありがとうございましたっ！
localhostでsubdomainのURLにアクセスしてデバックしたかったようなのでサポートできたかな？
e.g.
# config/routes Rails.application.routes.draw do constraints subdomain: 'admin' do resources :todos end end
/etc/hosts に 127.0.0.1 admin.localhost.local を追加してあげることで解決できた。
$ sudo vi /etc/hosts e.g. 127.0.0.1 localhost 127.0.0.1 admin.localhost.local 255.255.255.255 broadcasthost ::1 localhost
今回の場合とかはDockerを使って開発した方が良いのかもしれないです。
Enjoy Rails ٩( ‘ω’ )و
Rails Follow-up Osaka #12を開催した
rails-follow-up-osaka.doorkeeper.jp
会場提供は株式会社エイチームさんでしたーヽ(´▽｀)/
ありがとうございましたっ！
チームにjoinしたての方が環境構築に手間取っていたのでサポートできた。
具体的にはRMagickのインストールに失敗していた。
なんだかImageMagickのバージョン6でないとダメみたい。
なので、Homebrewでバージョン6をインストールした。
$ brew install imagemagick@6
しかし、ImageMagickなんてないと怒られる、、
brew infoを見るとconfigのパスを通せと言っているので
$ echo 'export PKG_CONFIG_PATH=/usr/local/opt/imagemagick@6/lib/pkgconfig' >> ~/.bash_profile $ echo 'export PATH="/usr/local/opt/imagemagick@6/bin:$PATH"' >> ~/.bash_profile $ brew link --force imagemagick@6
無事インストールすることができた。
今後、同じように環境構築でハマらないようにドキュメントにおこしておこうってアドバイスしました。
その後、全員で懇親会へ
楽しかったーヘ(^o^)ノ
神戸.rb Meetup #64 へ参加した ヘ(^o^)ノ
参加してきたメモ
ちょっとできるエンジニアが1人で色々やってもあんまり会社としてもメリットないよってお話
他のメンバーと一緒に階段を1段ずつ登っていかないとダメだよねってお話 できるエンジニアがいなくなると何も残らなくなってしまう、、
成果をちゃんと計測しようねってお話
試したい事があったらぱっと作って、成果を計測するようにしようってお話
Dokcerのお話
Dokcerの導入事例もいいけど、保守や運用事例が欲しいなってお話
Webフロントエンド ハイパフォーマンス チューニングどうよ？ってお話
- 作者: 久保田光則
- 出版社/メーカー: 技術評論社
- 発売日: 2017/05/26
- メディア: 単行本（ソフトカバー）
- この商品を含むブログを見る
HTTP2.0っていいよってお話
React のお話
Componentからif文をなくしちゃえーって話とPromiseの使い方を話した
Shinosaka.rbの資料を作成した
2ページしかできなかった、、
責任を譲渡することの大切さのお話
ある程度まかせることで人は成長できるというお話
泉州水ナスは美味しいというお話
美味しかった
JWTのお話
JSON Web Tokenだよー WebとMobileアプリに対応してるよー（Backendは1つでOK）ってお話 マイクロサービスには向いてるかもってお話
フロントエンドのエラー通知
GraphQLのお話
今週末にShinosaka.rbでテーマとしてイベントするけど、Kobe.rbでサーバーレスなGraphQLをお話しようかという
Shinosaka.rbの飲み代のお話
今日の懇親会は3,000円だった、なぜShinosaka.rbは飲み代が高いのかってお話
HUAWEI P10のライカカメラはすごいって話
カメラに詳しくないので僕はわからなかったが、詳しい人がみるとまぁまぁすごいらしい
TDD
FeatureテストもTDDでかくべき（バックエンドはstubで）ってお話
Getting started with Mastodon ヘ(^o^)ノ
Today, I attended this event.
But I failed to setup Mastodon.
The reason for the failure was a bug in cld3-ruby.
Fortunately this bug was fixed.
Setup for macOS
$ gem install foreman $ brew install protobuf redis $ git clone git@github.com:tootsuite/mastodon.git $ cd mastodon $ bundle install --with development $ yarn install --pure-lockfile $ bundle exec rails db:setup $ redis-server /usr/local/etc/redis.conf $ foreman start
Enjoy Mastodon ٩( ‘ω’ )و
