Flutter勉強会を開催しています!

エキサイト株式会社でモバイルアプリ開発に携わっている奥田です。 本日はアプリエンジニアの有志が集まり、Flutterの知見を深めるため開催している勉強会について執筆していきます。

開催の経緯は?

部署間を跨いだ交流が希薄だったため、知見交換の機会がありませんでした。そんな社内の現状からアプリエンジニアのメンバーが交流を活性化し、知見交換をすることで技術力を向上させたいという意見がキッカケで開催されました。

活動概要

  • 部署間での技術交流
  • 最新技術のキャッチアップ
  • 設計周りの相談会

上記の交流が主となっています。勉強会を開催して技術交流が活性化し、Flutterとどのように向き合うのか意識が統一できてきたと感じています。コミュニケーションを持てる場を創出することができたのが1番のメリットだと感じています。

活動内容

  • flutterを3.0.0系の変更点と対応項目について
  • freezedを2.0.0系の変更点と対応項目について
  • 推奨ライブラリの選定
  • OSごとのローカルストレージの挙動について
  • UseCaseを使用した際のメリット、デメリットについて
  • RiverpodのProviderごとの使用の勘所の共有
  • Riverpodを採用した設計についての議論

現時点で上記のことを議論してきました。アップデート関連では問題点の共有ができ、スムーズに実装に落とし込むことができました。技術交流をすることで実装の落とし穴、アップデート変更点の共有ができたのはいい傾向だと感じています。さらにRiverpodに対する知見の共有、設計への落とし込みかたの議論ができたことは効果的な使用方法、最適な設計を実現する第一歩だと感じています。

今後について

今後は勉強会の内容を社外にも定期的に発信していきたいと思います。読者のみなさんと一緒にFlutter界隈を盛り上げていければ大変嬉しいです。

最後に

エキサイトではフロントエンジニア、バックエンドエンジニア、アプリエンジニアを随時募集しております。長期インターンも歓迎していますので、興味があれば連絡いただければと思います。今回の記事を読んで少しでも興味が湧きましたら是非応募お願い致します!!

就業型インターンの募集情報です! www.wantedly.com

募集職種一覧はこちらになります!カジュアル面談からでも構いません。 www.wantedly.com

プライベートサブネットにあるサーバ上の開発環境Webページにアクセスする方法

こんにちは。 エキサイト株式会社の三浦です。

AWSで開発を行う場合、多くのアプリケーション用サーバはプライベートサブネットに設置することになるでしょう。 つまり、もしWebアプリケーションの開発環境がサーバ上に存在する場合、本来インターネットからアクセスできないプライベートサブネットにあるサーバに、何かしらの方法でアクセスする必要があるということです。

今回は、そのための方法を紹介します。

プライベートサブネット

プライベートサブネットは、以前以下の記事でも紹介しましたが、インターネットから直接アクセスできない場所となっています。

tech.excite.co.jp

そのため、もしプライベートサブネットにあるサーバの開発環境のWebページにブラウザ等からURLでアクセスしたい場合、何かしらの手段を講じる必要があります。

プライベートサブネット上のサーバの開発環境にアクセスする方法

今回はプライベートサブネット上の開発環境にアクセスする方法として、

  1. ALBを使う方法
  2. 踏み台サーバと /etc/hosts を兼用する方法
  3. 踏み台サーバと nip.io を兼用する方法

の3つを紹介します。

ALBを使う方法

AWS上でWebアプリケーションを作っているなら多くの方が本番環境ではALBを使っていると思いますが、これを開発環境でも使うようにすれば、インターネット経由で開発環境にアクセスできるようになります。

この場合は、ALB自体がパブリックサブネットに作られているのでALBにはインターネットからアクセスでき、そのALBがプライベートサブネット上のサーバと通信するため、結果的にインターネットからWebページが見られる、という構図です。

ただしこの場合、URLをどうするかという問題があります。

開発環境のURLでは taro.sample.co.jp のように、開発者のユーザ名をURLに含めることで、開発者ごとに異なるディレクトリを見るようにする場合があると思います。 これを実現するため、ローカルPCの /etc/hosts を使う場合が多いのではないでしょうか。

/etc/hosts では、IPアドレスとURLを指定することで、そのPCで使用する場合に限り、指定したIPアドレスとURLを紐付ける事ができます。

例えば、

10.0.0.0 taro.sample.co.jp

とすれば、 taro.sample.co.jp にアクセスした時に、自動的に 10.0.0.0 というIPアドレスにアクセスしてくれる、といった具合です。

ただしALBを使っている場合はこれには問題があります。

ALBのIPアドレス不定期に変わる可能性があるため、上記の方法で指定していると、ALBのIPアドレスが変更されるたびに /etc/hosts を変える必要があるのです。

そのため、もしALB経由で開発環境にアクセスしたいのであれば、 /etc/hosts を使うのではなく、開発環境のURLを Route53 パブリックホストゾーンに登録するのがいいかと思われます。

Route53 のパブリックホストゾーンに登録する場合、ALBであればALBそのものをURLのアクセス先として紐付けることができるため、ALBのIPアドレスが変わっても気にする必要がありません。

ただしこの方法を取る場合、パブリックなURLとして開発環境のURLが登録されるということになります。

まとめると以下のようになります。

ALBを使う方法とは

パブリックサブネットにあるALBからプライベートサブネットにあるサーバを見るようにし、ブラウザ等からはそのALBに対してアクセスするようにする。

ALBにアクセスするために、Route53のパブリックホストゾーンに開発環境のURLを登録し、ALBと紐付けておく。

利点

本番環境がALBを使用しているなら、それと同じ設定で開発環境にアクセスできる

欠点

  • 開発環境のURLをパブリックなURLとして登録する必要があり、セキュリティ的な心配が残る
  • 開発環境用のパブリックホストゾーン管理が必要になる
  • 場合によっては、開発環境用のURLのためにALBのリスナールールが複雑化する可能性がある

踏み台サーバと /etc/hosts を兼用する方法

2つ目は、踏み台サーバと /etc/hosts を兼用する方法です。

これは簡単に言えば、1つ目のALBを使う方法について、ALBの代わりに踏み台サーバを使うという方法です。

踏み台サーバとは、文字通り「踏み台」に使うサーバです。 このサーバはパブリックサブネットに作っておき、例えばプライベートサブネットに存在するサーバにSSHログインしたい時や、プライベートサブネットに作ったDBに接続したいときなどに使用します。

今回はその踏み台サーバに、例えばNginxを入れて指定のURLが来たら指定のサーバにアクセスを流すようにします。 具体的には、 taro.sample.co.jp というURLが来たら、 10.0.0.0IPアドレスのサーバに流す、といった具合です。

server {
    listen 80;

    server_name taro.sample.co.jp;

    location / {
        proxy_pass http://10.0.0.0;
    }
}

そして、 taro.sample.co.jp で踏み台サーバにアクセスが行くように、踏み台サーバのIPアドレス/etc/hosts を使ってURLと紐付けます。 踏み台サーバのIPアドレス99.0.0.0 であれば、

99.0.0.0 taro.sample.co.jp

といった形です。 これで、 taro.sample.co.jp にアクセスすれば、踏み台サーバを経由してプライベートサブネットに存在するサーバにアクセスすることができるようになります。

まとめると、以下のようになります。

踏み台サーバと /etc/hosts を兼用する方法とは

パブリックサブネットにある踏み台サーバからプライベートサブネットにあるサーバを見るようにし、ブラウザ等からはその踏み台サーバに対してアクセスするようにする。

踏み台サーバからプライベートサブネットにあるサーバを見られるようにするために、Nginx等でアクセスを流すようにする、

また、踏み台サーバにアクセスするために、/etc/hosts で指定のURLと踏み台サーバのIPアドレスを紐付けておく。

利点

踏み台サーバがあれば、それだけで開発環境にアクセスできる

欠点

  • 踏み台サーバにNginx等の設定が必要になる
  • /etc/hosts の管理が必要になる

踏み台サーバと nip.io を兼用する方法

3つ目は、踏み台サーバと nip.io を兼用する方法です。

nip.io とは、URLだけで向き先IPアドレスを指定してアクセスしてくれるサービスになります。

nip.io

Dead simple wildcard DNS for any IP Address

公式にも書いてあるとおり、例えば 10.0.0.1.nip.io というURLでアクセスした場合、IPアドレス 10.0.0.1 に対してアクセスできるようになります。

これを使用すると、色々と便利になります。

例えば今回の場合、踏み台サーバを使うところまでは同じですが、URLと踏み台サーバのIPアドレスを紐付ける時に、 /etc/hosts を使用しなくても良くなります。

踏み台サーバのIPアドレス99.0.0.0 であれば、例えば taro.sample.99.0.0.0.nip.io というURLにアクセスすれば、それだけで 99.0.0.0IPアドレス、つまり踏み台サーバへアクセスしてくれるのです。

それに応じてNginxの設定を少し変える必要はありますが、管理するものが増えて煩雑になりやすい /etc/hosts を使わなくてよいのはそれなりの利点となるのではないでしょうか。

server {
    listen 80;

    server_name taro.sample.99.0.0.0.nip.io;

    location / {
        # ホスト名を指定する必要がある場合は、ここで指定
        proxy_set_header Host taro.sample.co.jp;

        proxy_pass http://10.0.0.0;
    }
}

まとめると、以下のようになります。

踏み台サーバと nip.io を兼用する方法とは

パブリックサブネットにある踏み台サーバからプライベートサブネットにあるサーバを見るようにし、ブラウザ等からはその踏み台サーバに対してアクセスするようにする。

踏み台サーバからプライベートサブネットにあるサーバを見られるようにするために、Nginx等でアクセスを流すようにする、

また、踏み台サーバにアクセスするために、nip.io で指定のURLから踏み台サーバのIPアドレスにアクセスするようにする。

利点

  • 踏み台サーバがあれば、それだけで開発環境にアクセスできる
  • /etc/hosts を使う必要がない

欠点

  • 踏み台サーバにNginx等の設定が必要になる
  • URLの命名が、 nip.io の形式に縛られる

最後に

最近は開発環境がコンテナ化されている例も多く、その場合は今回のような設定はあまり必要ないかもしれませんが、例えば何かしらの理由でコンテナ化ができなかったり、全体的に古くからある環境でまだまだサーバ上で開発環境が動いている場合は、もしかしたら上記のような設定も必要になってくるかもしれません。

3つのどれが一番いいというわけではなく、それぞれの利点・欠点をもとに今の状況でもっとも良いものを選ぶのが適切かと思います。 参考にしていただけると幸いです。

社内イベントでライブコーディングを実施しました!

エキサイト株式会社でモバイルアプリ開発に携わっている奥田です。 本日は社内イベントでTODOアプリの作成をライブコーディングしたことを記載していきます。

なぜライブコーディングをしたのか?

弊社ではアプリ開発において一部Flutterを採用しています。 またFlutter界隈が盛り上がっていることもあり、アプリ開発を専門にしている方以外にも興味を持ってもらう機会が多くなりました。 そこで社内イベントで簡単なTODOアプリの作成風景をライブコーディングをすることで、実装のイメージを掴んでもらうことになりました。

当日の作成物!

機能としてはボタンタップ時に文言をリスト追加、対象アイテムの削除です! これらを制限時間15分という短い時間で実装しました。 製作物のgifを掲載しておくのでイメージがつきやすいかと思います!

当日の様子を見てみましょう!

15分という限られた時間で弊社のアプリエンジニアで解説、実装に分かれてライブコーディングをしました。写真を使用しながら、当日の流れを雰囲気を伝えていきます!

※感染防止対策を徹底し、開催しました。

アプリのUIが構築されていく様子をみなさん真剣な眼差しで見ていただけました! アプリの実装が完了した時は自然と拍手がおこりました👏👏

また参加者のみなさんから質問をたくさんしていただき、真剣に受け答えするエンジニアの姿が印象的でした!!! とてもいい交流ができたと思っています。

参加者の反応

実際に目の前でUIが構築されていく様子を見せることができ、アプリに興味を持ってくれる方が増えてくれたと思います。 ここで参加者の感想をいくつかピックアップして載せていきます!

  • 社内では人口の少ない技術について、誰でもわかりやすくデモを行っている点が良かった。

  • Flutterの特徴が現れていた社内全体レベルのライブコーディングは初めての試みだったかと思いますが、引き続き他にもいろいろ見てみたいなと思いました。

  • Flutterみたことない人たちにはリアルタイムで変化が起きるのは結構楽しい内容だったと思います。

  • 文字がもう少し大きかったらもっとよかった。

反響はとても良いものでしたが、文字の大きさの調整など配慮が足りない部分もありましたので次回からは改善していきたいです。

感想

ライブコーディングの取り組み自体が初の試みでしたが、無事成功してホッとしています。Flutterでのアプリ実装の強みであるUIの反映の容易さという点を活かし、参加者の方々の興味を惹くことができたのも良いポイントでした。そのため、社内からの反響もよく、機会があれば今回の反省点を活かして再度挑戦してみたいです。

最後に

最後に、エキサイトではフロントエンジニア、バックエンドエンジニア、アプリエンジニアを随時募集しております。長期インターンも歓迎していますので、興味があれば連絡いただければと思います。今回の記事を読んで少しでも興味が湧きましたら是非応募お願い致します!!

就業型インターンの募集情報です! www.wantedly.com

募集職種一覧はこちらになります!カジュアル面談からでも構いません。 www.wantedly.com

また社内イベント全体の模様は第1回テクデザビアバッシュ開催しました!【社内イベントレポ】をご覧ください!

2022年度新卒技術研修を実施しました!

はじめに

エキサイトでエンジニアをしているたからだ(amochan0313)です。 このたび、2022年度新卒技術研修を実施しました。 今回は、研修内容や工夫したポイントをお伝えするとともに、実際に使用した講義資料を一部公開します。

新卒技術研修の概要

新卒技術研修の詳細を話す前にまずは概要の説明です。

新卒エンジニアの人数

3人

研修期間

4/18 ~ 5/31

コンテンツ
場所

オンライン

  • 講義は Zoom で実施
  • システム開発時のコミュニケーションでは主に Discord を利用

研修の目標

エキサイトは多くのサービスを提供しており、その分チームも多く存在します。各チームで技術スタックやアーキテクチャ、細かい開発フローなどが異なります。そこで、新卒の業務への適応は各チームでタスクをこなすことで行い、この新卒技術研修では「業務で活躍するために必要となる基礎技術を学ぶ」ことを目標に実施しました。

講義

まずは社員による講義を紹介します。

業務で活躍するために必要となる基礎技術を学ぶ」ということで、今回は幅広い分野の講義を用意しました。講義数は 11 で、全部で約2.5日かけて実施しました。 今回動画は公開していないですが、講義の様子はすべて録画してあり社内では共有しています。

良いコードの書き方

良いコードの定義を「読みやすいこと」、「拡張しやすいこと」、「安全なこと」の3つにしぼって解説したコーディングに関する講義です。

クリーンアーキテクチャ

クリーンアーキテクチャーの基礎を学ぶ講義です。クリーンアーキテクチャーで重要となる、「SOLID の原則」、「非循環依存関係の原則」、「安定依存の原則」、「安定度・抽象度等価の原則」などを解説し、アプリケーションの依存方向の重要性を理解する内容でした。

Docker

Docker の基礎を学ぶ講義です。研修ではコンテナを操作するハンズオンも行いました。

DNS

DNS の基礎を学ぶ講義です。研修では Route53 を使ってレコードの登録や委任を行い実際に名前解決をするハンズオンも行いました。

AWS

クラウドを利用する意義やデプロイの重要性に加え、システム開発パートでも利用するデプロイの具体的な方法に関する講義とハンズオンを行いました。

エンジニアのマインド

エンジニアとして働く上で重要となるマインドに関する講義です。

フロントエンド

フロントエンド技術の変遷に関する講義です。

RDB

SQL の問題を解きながら RDB の基礎概念を学ぶ講義・ハンズオンを行いました。 主に「データサイエンス100本ノック」からいくつか問題をピックアップして一緒に解いていきました。

ソフトウェアテスト

ソフトウェアテストの基礎を学ぶ講義です。研修では PHP のサンプルコードで実際に単体テストを書くハンズオンを行いました。

Web サービスのセキュリティ

Web サービスを提供する上で知ってほしいセキュリティに関することを紹介する講義です。Web セキュリティでまずはおさえておくべき XSS,SQLi,CSRF の解説と事例を紹介し、自社サービスを例にその他の観点でセキュリティを意識して実装した内容などを紹介しました。

インフラストラクチャー

社内の共通システムの紹介と共通システムのメリット・デメリット、共通システムの今後の方針を紹介する講義です。

システム開発

次にシステム開発について紹介します。

お題として出したのは、会社で購入している検証端末の貸し出しシステムです。指定したいくつかの機能を盛り込むことを必須条件として開発してもらい、オプションの追加機能については時間が許す限り実装してもらいました。 このシステム開発のパートは以下の2つのねらいをもって実施しました。

  • 講義で習ったことを開発を通して実際に使うことで身につけてもらうこと
  • 新卒エンジニア個々人で苦手意識のある分野や経験したことのない技術領域へチャレンジしてもらうこと

それぞれ簡単に説明します。

1つめは、講義を聞いて理解したことを実際に使えるようになるための練習場としてシステム開発パートを使ってもらいました。例えば、開発環境では Docker を使って開発してもらったり、プロジェクトのテストコードは必ず書いてもらったりしました。

2つめは、今回は新卒エンジニアが3人しかいなかったので個々人の苦手分野や経験したことのない技術領域にチャレンジできるように工夫しました。 元々新卒の3人は入社前にエキサイトの長期インターンを経験していたので、その時のメンターの方に「得意・苦手な技術」や「新卒としてチームにどういう状態で入ってきて欲しいか」のようなヒアリングを行い、そのヒアリングを元に、例えばAPI とフロントの担当メンバーを割り振りました。 この方法が可能だったのは今年度の新卒エンジニアが3人と少数かつ3人とも長期インターンを経験していたからだったと思います。

3人で約1ヶ月間チーム開発を行い、最終発表はエキサイトHDの社員全員が参加する MTG の場で、開発したツールの説明とデモを実施し、社内ツールとしてリリースしました。

まとめ

今回は2022年度新卒技術研修の紹介をしました。
約1.5ヶ月の研修期間で、用意したすべての講義を実施することができ、お題のシステムもリリースできてひとまずは良かったです。もちろん講義・システム開発パートのそれぞれで反省点はあるので、それらを考慮して今後はさらに良質な研修を実現できればと考えています。

エンジニアを志す方や各社の新卒エンジニア研修において、今回ご紹介した研修内容や講義資料がお役に立てれば幸いです。また、この記事を読んで、少しでもエキサイトに興味を持っていただけると嬉しいです。

最後に、エキサイトではフロントエンジニア、バックエンドエンジニア、アプリエンジニアを随時募集しております。長期インターンも歓迎していますので、興味があれば連絡いただければと思います。

就業型インターンの募集情報です! www.wantedly.com

募集職種一覧はこちらになります!カジュアル面談からでも構いません。 www.wantedly.com

【テクデザBeer Bash】Canvaによるバナートレースライブ

こんにちは、デザイナーの山﨑です。

テクデザBeer Bashを開催時に、デザイナーの山﨑・鍜治本で「Canvaによるバナートレースライブ」を開催しました。

バナートレースと銘打っていたのですが、今回トレースしたのは某雑誌のトレースです。(他社のデザインなのでぼかしを入れています。)

制限時間は15分だったので、時間内に制作できるようにコピペできる事前に作ったデザインを用意していました。(普通に作ったら20分かかりました…)

工程としては、タイトルなどの主要なデザインの作り方を解説→「この工程を繰り返したものはこちらです」と事前に用意したデザインをコピペする3分クッキング方式にしました。

最後に作ったデザインをCanvaのスマートモックアップに当てはめて完成です!

当日に備えて何度もリハーサルを行っていたので、当日はちゃんとサクサク作ることができてよかったです!

最後に、エキサイトではデザイナー、フロントエンジニア、バックエンドエンジニア、アプリエンジニアを絶賛募集しております!

興味があれば連絡いただければと思います🙇‍♀️

それではまた!

www.wantedly.com

【Canva布教】Canvaトレース道場を開催してみた

はじめに

こんにちは、メディア事業部デザイナーの山﨑です。 先日メディア事業部でビジネス・エンジニア職向け「Canvaトレース道場」を開催したので、それについて書こうと思います。

開催のきっかけ

ビジネス職の方に向けてCanva説明会を行っていたところ、「説明だけじゃなくて、Canvaでトレース講習とかできない?」とリクエストされました。

少人数で行ったところ「Canvaの使い方覚えられたしデザインの勉強になった!」と好評だったので、メディア事業部全体で行い規模を広げる形にしました。

開催の様子

「Canvaトレース道場」の概要はこんな感じです。

オフライン開催をしたのですが、募集人数を5名のところ6名が参加してくれました!

お題のバナーに沿って全員が同時に作り始めるのは楽しかったです!(見本となるバナーは他社のものなのでぼかしを入れました。)

作ったバナーは最後にスマートモックアップに適用して終了しました。

Canvaは制作したクリエイティブを簡単にモックアップにすることができて最高です。

おわりに

個々のCanvaのテクニック向上によって総合的なクリエイティブ能力・理解の底上げを目指す上で、今回のCanvaトレース道場はその一歩になったかなと思いました。

最後に、エキサイトではデザイナー、フロントエンジニア、バックエンドエンジニア、アプリエンジニアを絶賛募集しております!

興味があれば連絡いただければと思います🙇‍♀️

それではまた!

www.wantedly.com

Flywayで、S3にあるSQLファイルを使ってマイグレーションする方法

こんにちは。 エキサイト株式会社の三浦です。

JavaのアプリケーションでDBを扱っている場合、DBのマイグレーションのためにFlywayを使っている方も多いのではないでしょうか。

今回は、マイグレーションに使用するSQLファイルについて、ローカルではなくS3上にあるものを使用する方法を紹介します。

Flywayとは

Flywayは、DBのマイグレーションに使用するツールです。

公式には以下のように説明されています。

flywaydb.org

Version control for your database

Robust schema evolution across all your environments. With ease, pleasure, and plain SQL.

Flywayを使用することで、例えば開発環境用のDBをローカルPCのコンテナに簡単に構築することができたりします。

マイグレーションSQLファイルの場所

FlywayでDBのマイグレーションを行うには、マイグレーション先DBとマイグレーションSQLファイルを指定する必要があります。

以下のような形です。

# DB指定
flyway.url=jdbc:mysql://localhost:3306/sampledb
flyway.user=sample-user
flyway.password=sample-password

# SQLファイルのパス指定
flyway.locations=filesystem:path/to/sampledb/schema

このようにすれば、ローカルPCの指定パスに存在するファイルを使ってマイグレーションを行ってくれます。

これで十分な場合もあるかもしれませんが、例えばアプリケーションをGithubでバージョン管理しており、本来はマイグレーションSQLファイルも同様に管理したいものの、DB内のテーブル数やその中のレコード数がかなり多かったり、あまり外部に公開したくないデータが含まれていたりして、バージョン管理が難しく、結果直接ファイルをローカルPCに持ってくるのが難しい場合もあるでしょう。

そういった場合は、Flywayから直接S3上のSQLファイルを指定することができます。

S3上のマイグレーション用ファイルを使用する方法

S3上のファイルを使用するには、まずAWS認証のための設定をする必要があります。

認証情報をローカルPCに入れる

まずは該当S3バケットが存在するAWSアカウントで、認証用のIAMユーザを作成します。

その後、 aws configure コマンドでローカルPCにクレデンシャル情報を設定してください。

この時、設定したアカウントの profiledefault であればそのままで構いませんが、もしそれ以外であれば、環境変数で以下のように設定します。

AWS_PROFILE={該当アカウントのprofile名}

これで、Flywayで使用したいAWSアカウントの認証情報の設定が完了しました。

FlywayでS3を使用できるようにする

続いて、FlywayがS3を使用できるようにします。

build.gradleに以下のように設定します。

buildscript {
    repositories {
        mavenCentral()
    }
    dependencies {
        // バージョンは必要に応じて変更
        classpath platform('software.amazon.awssdk:bom:2.17.160')
        classpath 'software.amazon.awssdk:s3'
    }
}

これで、FlywayでS3を使用できるようになります。

ロケーション指定

ここまでくれば、後はS3上のロケーションを指定するだけです。

# DB指定
flyway.url=jdbc:mysql://localhost:3306/sampledb
flyway.user=sample-user
flyway.password=sample-password

# SQLファイルのパス指定
flyway.locations=s3:sample_bucket/path/to/sampledb/schema

以上のように設定することで、「sample_bucketバケット上の「/path/to/sampledb/schema」に存在するSQLファイルを、マイグレーション用ファイルとして使用してくれます。

また、例えば「テーブルのスキーマ用のSQLファイルはGithubで管理してローカルPCに落とし、レコード情報だけはS3に持っておきたい」等の場合は、以下のようにカンマ区切りで複数指定することもできます。

# DB指定
flyway.url=jdbc:mysql://localhost:3306/sampledb
flyway.user=sample-user
flyway.password=sample-password

# SQLファイルのパス指定
flyway.locations=filesystem:path/to/sampledb/schema,s3:sample_bucket/path/to/sampledb/schema

S3上のファイルをマイグレーションファイルとして使用する際の注意点

S3上のファイルを直接マイグレーションファイルとして指定するのは非常に便利に使えますが、いくつか注意点があります。

  • AWSアカウントの認証が必須になる
  • マイグレーションのたびにS3のファイルを見に行くため、S3上に存在するファイル数が多くなったり、ファイル容量が大きくなるほど時間がかかるようになる
  • FlywayのCommunity版だと、S3上のファイルは100ファイルまでしかマイグレーションできない

上記の点が許容できない開発の場合は、例えば自分でS3からファイルをローカルPCにダウンロードした上で、ローカルファイルのみを指定してマイグレーションするなどの方法もあるので、そういった方法で回避するのもいいかもしれません。

最後に

DBが大きくなるのに比例して、DBマイグレーションの悩みは大きくなっていくと思います。

今回の方法で、そういった悩みが解決したら幸いです。

AWSのプライベートサブネットとパブリックサブネットの違い

こんにちは。 エキサイト株式会社の三浦です。

Amazonが提供しているAWSでは、サーバやDBなどを配置する箱として「サブネット」と呼ばれるものがあります。 そしてサブネットは、「プライベートサブネット」と「パブリックサブネット」の2種類が存在します。

今回は、その違いについて説明していきます。

サブネットとは

AWSには、「サブネット」と、それを入れるための「VPC」と呼ばれるものがあります。

公式では、以下のように説明されています。

docs.aws.amazon.com

VPC の基本

Virtual Private Cloud (VPC) は、AWS アカウント専用の仮想ネットワークです。


サブネットの基本

サブネットは、VPC の IP アドレスの範囲です。

知らない人にとってはおそらく「なんのこっちゃ」だと思いますが、言ってみれば、「VPC」は「サブネット」を入れるための箱で、「サブネット」はサーバやDBなど、具体的なAWSサービスを入れるための箱です。

例えばEC2を作成する時、「VPC」、及び「サブネット」を作成し、その内部にEC2を建てるようにすることで、そのまま作成するよりもセキュアにEC2を作成することができます。

1つのVPCには複数のサブネットを配置することができます。

そしてこのサブネットですが、「プライベートサブネット」というものと「パブリックサブネット」というものがあります。

プライベートサブネットとパブリックサブネットの違い

この「プライベートサブネット」と「パブリックサブネット」には明確な役割の違いがあり、「インターネットから直接アクセスさせたくないもの」はプライベートサブネットに、「インターネットから直接アクセスさせたいもの」はパブリックサブネットに入れます。

例えば、外部からアクセスする必要のないバッチサーバなどはプライベートサブネットに、SSHなどで外部からログインしたい踏み台サーバなどはパブリックサブネットに配置する、といった具合です。

Webサービスであれば、多くの場合パブリックサブネットに配置するのは踏み台サーバやユーザアクセス用のALBくらいのもので、他はすべてプライベートサブネットに置くので、ほとんどプライベートサブネットばかり使うことになると思われます。

では、このインターネットからのアクセスの差はどこから生まれているのでしょうか?

NATゲートウェイとインターネットゲートウェイ

実はプライベートサブネットとパブリックサブネットの違いは、インターネットとの接続に「NATゲートウェイ(NAT GW)」を使っているか「インターネットゲートウェイ(IGW)」を使っているか、というものです。

パブリックサブネットで使われるIGWは、サブネット内のサーバ等に付与されるプライベートなIPアドレスグローバルIPアドレスを、1 : 1で紐付けることができます。

結果、インターネット側からパブリックサブネット内に存在するサーバ等を認識することができるのです。

一方でプライベートサブネットで使われるNAT GWは、NAT GW自体が持つグローバルなIPアドレスに、複数のプライベートIPアドレスを紐付けます。 つまり、グローバルなIPアドレスとプライベートなIPアドレスの対応が 1 : n となり、1つのグローバルIPアドレスで複数のサービスがインターネットの情報にアクセスできるようになるのですが、逆にインターネット側からは、個別のIPアドレスを識別することができません。

結果、インターネット側からはプライベートサブネット内に存在するサーバ等を認識することができず、インターネットから直接アクセスできないのです。

(ちなみにNAT GW自体はグローバルIPアドレスと 1 : 1 で紐付いている必要があるので、パブリックサブネット内に存在しています。)

この仕組みを利用することで、よりセキュアにAWSサービスを扱えるようになるというわけです。

最後に

ざっくりとプライベートサブネットとパブリックサブネットの差を紹介してみました。

クラウドでインフラを作成する時は、セキュリティに気をつけないと思わぬ攻撃を受けて取り返しのつかないことになるので、きっちりと考えて使っていきましょう。

5月度iXIT Tech MTGを開催しました!

こんにちは、iXITの渡邊です。
先日、iXIT Tech MTGを行いました。

iXIT Tech MTGとは、iXITのエンジニアが月一で、一堂に会するMTGです!
このMTGでは、メンバーの発信力を高める取り組みとして、昨年度からメンバーが持ち回りでLT発表を行っています。

5月度 LT紹介

5月のLT担当メンバーは秋山さんと武見さんでした。

LTのスライドを一部ご紹介させて頂きます。

武見さん:インターフェース(ハードウェアの方)を学ぼうぜ!

 

普段何となく使っている電子機器に差しているケーブル類、改めて見返すと色んな端子の種類があるんですね!

パラレル接続のインターフェースは最近中々見かけなくなりましたから、実物の写真と見比べながらの説明がとても分かりやすかったです。

会社から貸与されているノートパソコンにUSBCが付いてるのを最近気づいてamazonでUSBPDとtypeC買ったらめっちゃ電源軽くなってウッキウキ!

みんなにもおすすめ!

個人的に、これが一番ウキウキ情報でした。出社する時PCの電源ケーブルが地味にかさばるので私も試してみたいです!

 

秋山さん:古い環境でComposer用のライブラリを使いたい

前提条件

ライブラリを使いたい環境のPHPのバージョンが、 Composerの使用条件以上であること(5.3.2以上)

環境は案件の状況もあり、おいそれと動かせるものではないので、自身の案件でライブラリが動くかどうかちょっと手元で試してみたい時、ローカル環境だけで済む作業の効率化をしたい時には便利ですね!

以上、LTの紹介でした!

また、今回からLTの司会進行も技術部メンバーが交代で回していく試みをはじめました。
ファシリテーション力もメキメキ鍛えられますね…!

5月の司会トップバッターは池田さんです!
昨年度のエキサイトHD社内カンファレンス『excite×iXIT TechCon』でもバックエンドセッションの司会を務めた頼れる先輩です!

 

6月もiXIT Tech MTGでのLTを紹介予定です!次回もお楽しみに!

Docker ComposeでGraceful Shutdownのための時間をかせぐ方法

こんにちは。 エキサイト株式会社の三浦です。

前回、ECS FargateとGraceful Shutdownに関する記事を書きました。

tech.excite.co.jp

今回はこの調査をしている時に直面した、Docker Composeで実行したコンテナの終了時、Graceful Shutdownが完了する前に強制停止されてしまう場合がある件について説明していきます。

Docker ComposeとGraceful Shutdown

上記の記事で書いたとおり、コンテナで動いているアプリケーションを安全に終了させるためにはGraceful Shutdownをすることが必要です。

すなわち、例えばWebサーバであれば、「コンテナ停止時に即時終了するのではなく、さばいているアクセスがすべて完了してから停止する」というような感じです。

Docker Composeでも、適切な終了シグナルを送信するようにすればちゃんとGraceful Shutdownを開始してくれるのですが、実は場合によっては途中でGraceful Shutdownが打ち切られ、強制終了されてしまう場合があります。

Docker Composeと stop_grace_period

Docker Composeには stop_grace_period という設定項目があります。

docs.docker.com

stop_grace_period specifies how long the Compose implementation MUST wait when attempting to stop a container if it doesn’t handle SIGTERM (or whichever stop signal has been specified with stop_signal), before sending SIGKILL. Specified as a duration.

Default value is 10 seconds for the container to exit before sending SIGKILL.

この項目は、「終了コードを送った後にこの項目に設定した時間が経過したら、Graceful Shutdownが完了していなくても強制終了する」というもので、デフォルトは10秒になっています。

すなわち、この項目に何も設定していない場合、Graceful Shutdownに10秒以上掛かってしまうアプリケーションでは、10秒の時点で強制終了されてしまうということです。

もし10秒以上時間がかかる可能性があるのであれば、適切な値をここに設定しましょう。

ECS Fargateと stopTimeout

実はこれに似たような設定が、ECS Fargateのタスク定義にも存在します。

docs.aws.amazon.com

stopTimeout

コンテナが正常に終了しなかった場合にコンテナが強制終了されるまでの待機時間 (秒)。

上記の通り、 stopTimeout という設定項目がそれに該当します。

ECS Fargateの場合はデフォルトが30秒となっていますが、こちらも必要に応じて適切な値に変更するのが良いでしょう。

{
    "family": "***",
    ...
    "containerDefinitions": [
        {
            "name": "***",
            "stopTimeout": 60,
            ...
        }
    ]
}

最後に

今回は、Graceful Shutdownを気にし始めると躓くかもしれないタイムアウトの設定値について説明しました。

Graceful Shutdownは、適切に設定しないとユーザが不利益を被る結果になることもあるので注意していきましょう。

プロジェクト/リポジトリごとにJVMのバージョンを切り替える

エキサイト株式会社メディア事業部エンジニアの佐々木です。

メディア事業部では、最近JVMを利用した開発が増えてきており、プロジェクトやリポジトリごとにバージョンが変わったりが起きています。これをなるべく自動で切り替える方法をご紹介します。

前提

メディア事業部では、SDKMANを使用して、Javaをインストールしております。Windows/Mac/Linuxで統一したコマンドを使用できるので管理が楽です。

設定ファイルの作成

設定ファイルを作成します。

$ sdk env init

コマンドを実行すると、下記ファイルが出来上がります。

# Enable auto-env through the sdkman_auto_env config
# Add key=value pairs of SDKs to use below
java=17.0.2-tem

sdkman_auto_envというパラメータを有効にすると、ディレクトリ遷移時に自動的に切り替わります。下記コマンド実行すると書き換わります。

$ sed -i -e 's/sdkman_auto_env=false/sdkman_auto_env=true/g' ~/.sdkman/etc/config

切替の確認

ディレクトリを移動すると、下記のようなメッセージがでます。

Using java version 17.0.2-tem in this shell.

正常に切り替わりました。

マシンインストールされていないJVMバージョンが指定されている場合

マシンにないJVMが指定されている場合は、インストールを促すようになります。

インストールされていないJVMバージョンを.sdkmanrcに記載します。

# Enable auto-env through the sdkman_auto_env config
# Add key=value pairs of SDKs to use below
java=18.0.1-amzn

記載後に、ディレクトリを移動すると下記のように警告をだしてくれます。

Stop! Candidate version is not installed.

Tip: Run the following to install this version

$ sdk install java 18.0.1-amzn

警告をだしてくれたので、インストールします。警告にあるコマンドを叩いてもいいんですが、コピペが面倒なので、.sdkmanrcに指定されているものをインストールするショートカットコマンドを実行します。

$ sdk env install

Downloading: java 18.0.1-amzn

In progress...

######################################################################## 100.0%

Repackaging Java 18.0.1-amzn...

Done repackaging...
Cleaning up residual files...

Installing: java 18.0.1-amzn
Done installing!


Using java version 18.0.1-amzn in this shell.

こんな感じでインストールが完了します。

まとめ

プロジェクトが多くなってくると環境問題がでてくるかとおもいます。Dockerを使うのも手ですが、こういった切替がほぼ自動でできるのは便利かと思います。

最後に

エキサイトではフロントエンジニア、バックエンドエンジニア、アプリエンジニアを随時募集しております。長期インターンも歓迎していますので、興味があれば連絡いただければと思います。

カジュアル面談はこちらになります! meety.net

就業型インターンの募集もしております!

www.wantedly.com

募集職種一覧はこちらになります!(カジュアルからもOK) www.wantedly.com

ECS Fargate Spotでは、STOPSIGNALを変更できない

こんにちは。 エキサイト株式会社の三浦です。

今回は、ECS Fargate SpotでGraceful Shutdownをしたい時に引っかかる可能性のある、STOPSIGNALに関する注意点を説明します。

ECS Fargate Spotとは

ECS Fargateは、AWSの提供するマネージドなコンテナ実行サービスです。

公式では、以下のように説明されています。

AWS Fargate は、サーバーレスで従量制料金のコンピューティングエンジンであり、サーバーを管理することなくアプリケーションの構築に集中することができます。

そしてECS Fargate Spotは、AWSの空きキャパシティをECS Fargateで使用するプランで、AWS側の都合で停止される可能性がある代わりに、通常に比べて大幅に安い料金となっています。

その料金の安さから、可能であればSpotを使いたいところですが、「AWS側の都合で停止される可能性がある」点を考慮する必要があります。

Graceful Shutdown

AWS側の都合で停止されても問題ないようにするには、停止時にGraceful Shutdownをすれば良いでしょう。


* 2022年8月8日追記

なお、ALBと接続してWebアプリケーション等として使用している場合は、Graceful Shutdownによる対応では問題が起きる場合があります。

詳細は以下にまとめてあります。

tech.excite.co.jp


Graceful Shutdownとは、端的に言えば「安全な停止」のことで、例えばWebサーバで言えば、「停止命令が来てもすべてのアクセスの処理が完了するまでは停止せず、完了後に停止するようにする」などです。

多くのサービスの場合、 SIGTERM というシグナルがコンテナに送られるとGraceful Shutdownが行われます。 また、ECS Fargate Spotも、停止の際はこの SIGTERM が送られるので、基本的には勝手にGraceful Shutdownが行われます。

ただし、たまに例外があります。

有名なところで行くと Nginx で、 Nginx をGraceful Shutdownするには SIGQUIT が必要となり、 SIGTERM では強制停止されてしまうのです。

では、ECS Fargate Spotで停止シグナルを変更するにはどうすれば良いでしょうか?

ECS Fargate Spotでの停止シグナル変更方法は存在しない

2022年5月23日現在、AWSのブログには、以下のような記載があります。

タスクが停止すると、ECS はそのタスク内の各コンテナに停止シグナルを送信します。デフォルトの停止シグナルは SIGTERM ですが、これは Dockerfile に STOPSIGNAL ディレクティブを追加することによってオーバーライドできます。この停止シグナルは、シャットダウンの命令をアプリケーションに通知します。

これに従うなら、Dockerfileに STOPSIGNAL を追記すれば停止シグナルは変更できそうですが、 実際はできません

このブログは日本語訳なのですが、原文の英語版を見てみると、以下のようになっています。

When a task is stopped, ECS sends each container in that task a stop signal. Today, ECS always sends a SIGTERM, but in the future you will be able to override this by adding the STOPSIGNAL directive in your Dockerfile and/or task definition. The stop signal informs your application that it is time to begin shutting down.

まとめると、「現在はECSでは常にSIGTERMが送られるが、 将来的には DockerfileのSTOPSIGNALやtask definitionあたりで変更できるようになる」となっています。

実際はこちらが正しく、現在はECSからは常に SIGTERM が送られてしまうのです。

では、 SIGTERM 以外のシグナルでGraceful Shutdownするアプリケーションでは、どのようにGraceful Shutdownをすればよいのでしょうか。

ECS Fargate Spotで、SIGTERM以外のGraceful Shutdownをする方法

実は、「コンテナが受け取ったシグナルを別のシグナルに変換する」というライブラリが存在します。

github.com

現状では、こういったライブラリを使用して、 SIGTERM を受け取ったら任意のシグナルに変換するようにすると良いでしょう。

そして将来的にAWS側でシグナルの変更に対応したら、そちらに寄せるのが良いかと思います。

最後に

Graceful Shutdownは、直接アプリケーションの動作に関わらないので見過ごされることもあるかもしれませんが、ちゃんと設定しないとユーザ側にエラーを発生させてしまう要因になり得ます。 注意していきましょう。

なお今回は停止シグナルに注目していますが、上記で上げたAWSのブログにも書いてあるとおり、ALBと接続している場合はそちらからの登録解除設定も考える必要があります。 ご注意ください。

Controllerでもinterfaceをimplementsすることができる

こんばんは。エキサイト株式会社の中尾です。

あまり需要がないかもしれないですが、Controllerでもinterfaceをimplementsすることができます。

ただ普通にimplementsすることは、どんなクラスでもできますが、@RequestMapping@GetMapping()@RequestParam()も使えます。

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

@RequestMapping("hello")
public interface HelloController {
    /**
     * helloを返すエンドポイント
     *
     * @param hello
     * @return
     */
    @GetMapping()
    String hello(@RequestParam(name = "hello") String hello);
}
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloControllerImpl implements HelloController {
    @Override
    public String hello(String hello) {
        return hello + "\n";
    }
}

気をつけて欲しいのは@RestControllerは実装クラスにつけるということです。

まぁ、swaggerでも良いのですが

EnumをExtensionを使用し拡張することでStringを取得できるようにする方法

エキサイト株式会社の奥田です。 本日はTabViewを作成する際にEnumに紐付いたStringを取得する場合があったため、その方法について記述します。

なぜEnumに紐付いたStringを定義する必要があったか?

今回のケースではTabViewを作成する際にTabの名称をEnumに定義したTypeに紐付けたものにしたかったからです。 Enumの要素一つ、一つに対して紐づくものであり、取り回しがしやすいと感じて、今回のような実装にしました。

定義

それではまずEnum側の定義をしていきます。

enum SampleCategory {
  article,
  user,
}

extension SampleCategoryExt on SampleCategory {
  String get name {
    switch (this) {
      case SearchCategory.article:
        return '記事';
      case SearchCategory.user:
        return 'ユーザー';
    }
  }
}

定義したStringを呼び出す際は下記のように定義します。

final article = SearchCategory.article.name;
final user = SearchCategory.user.name;

print('${article}'); //'記事'
print('${user}'); //'ユーザー'

このように定義したEnumからextensionを使用し拡張することでStringを取得することができました。

まとめ

今回はStringを取得するシンプルな定義にしましたが、widgetやintなどを定義することができます。使用する場面に応じて使い分けることができるので、柔軟に使用することができそうです。 次回は本格的にTabViewの実装部分の記事を書いていこうと思います。

最後に

弊社では絶賛採用強化中です。もしご興味がある方がいましたら下記リンクよりアクセスいただけると幸いです。(カジュアルからもOKです)

www.wantedly.com

【世界初開催!】Config Watch Party参加してきた!【後編】

こんにちは!21卒デザイナーの山崎です! 2022年5月11日に開催されたfigma初のオフラインイベント「Config Watch Party」レポの後編になります!

↓会場の様子を紹介した前編や日本から登壇したスピーカーセッションを紹介した中編はこちらです↓

tech.excite.co.jp

tech.excite.co.jp

後編ではLT会の様子を紹介したいと思います!

LT会はConfig Watch Party参加者しか見れなかったと思うので、オンラインでConfigを視聴していた方はぜひチェックしてみてください👏

LT会「とっておきFigmaの活用策をシェアしよう!」

選りすぐりのFigmaヘビーユーザー数組が、とっておきのFigmaの使い方をシェアしてくれるLT会です!

ざっくりLT会内容をまとめてみました!

「みんな大好き!ショートカット!!!」

株式会社ベーシック・Brianさんが発表してくれたのはFigmaの便利なショートカットです!

shift+1

「Zoom to Fit」はデザイン全体を見渡せる機能。よくFigma内で「あのデザインどこにいったっけ…?」っと迷子になるのでこの機能は大変助かります…!👏

⌘+shift+C

「Copy as PNG」はPNGで勝手に書き出してくれる機能です!

Figmaで作ったデザインをSlackで共有するためにわざわざ書き出して…という作業をする方におすすめのショートカットになります🎉

ちなみに⌘+shift+Cを使えばこのはてなブログにも⌘+Vで画像貼り付けを行うことができます!すごすぎる…(Macと端末同期していればiPadにも貼り付けることができるそうです!)

⌘+Click

こちらは「Deep select」という「グループレイヤーの層に阻まれて一発でクリックできない…」というオブジェクトを一発でクリックできる機能です!

⌘+Click」を押した後に/」を押すと一つ上の親要素を選択できる機能も…!

詳しくはBrianさんのプレゼンをご覧ください👏

www.figma.com

プラグイン紹介「Pitchdeck」

登壇していただいたnarumiさんはFigmaプラグインについてお話ししてくれました! 「Pitchdeck」という「Figmaで作ったスライドにアニメーションが付けられる」プラグインをご紹介いただきました! 一つ一つのフレームにもアニメーションが付けられる便利なプラグインで、全く知りませんでした…!

www.figma.com

「figjamのサービス立案段階での活用方法」

Takako Watabeさんがお話ししてくれたのはサービス立案段階というアーリーフェーズでのFigjamの活用方法です!

週末に2時間ほど友人デザイナーとアプリ開発しているwatabeさんが、2時間という制約がある中でどのようにスピード感失わずにブレスト→ペルソナ・リサーチ→プロトタイプ制作をFigjamで制作したかをお話ししてくれました!

www.figma.com

Figmaを使ったロゴ作りのメリット」

Qiita株式会社でデザイナーをしている綿貫佳祐さんが発表してくれたのはFigmaでのロゴ制作についてです!

Figmaでのロゴ作りのメリットは以下の4点でした!

  1. 整数座標へのスナップの容易さ
  2. 1つのアンカーポイントから複数のパスが生やせる
  3. スムースコーナーが簡単に作れる
  4. リファレンスとの行ったり来たりが楽

ロゴを印刷する場合もあるので中々作る機会がないんですが、Webのみでの使用だったらFigmaでも作ってみたいなと思いました!

qiita.com

終わりに

いかがだったでしょうか?

最後に、エキサイトではデザイナー、フロントエンジニア、バックエンドエンジニア、アプリエンジニアを絶賛募集しております!

興味があれば連絡いただければと思います🙇‍♀️

それではまた!

www.wantedly.com