大崎大輝のアバター
大崎大輝のホームページ
gitlabのロゴ

Works

  • 2021/7 ~ 2023/7

    某旅行サイト運営会社

    時給 4,300円 程度

    航空券の予約システムのバックエンド開発および 予約の管理サイトの開発

    • TypeScript
    • Node.js
    • PostgreSQL
    • GraphQL
    • SOAP

    利用可能な飛行機を検索して一覧を表示し、チケットの予約を行うWebシステムのバックエンド開発を行いました。さらに、予約情報を管理してその請求書を作る管理サイトの作成を行いました。

    thumbnail

  • 2021/3 ~ 2021/6

    大崎大輝

    このホームページ version2.1.3

    • TypeScript
    • Node.js
    • React.js
    • Next.js
    • Docker
    • Git
    • GitLab
    • Ubuntu18.04

    このホームページの仕様や実装のポイントです。

    thumbnail
    概要

    ホームページアプリケーションはVPS上で開発した。VPS上にホームページサーバーのネットワークを構成し、 インターネット上に公開している。

    ホームページ構成図

    ホームページへのアクセスがあった場合、リバースプロキシに実装されているSSLにより、暗号化通信が開始される。 その後、セキュリティのために追加のヘッダーを設定した後、ホームページサーバーに処理を引き継ぐ。 ホームページサーバーは、URLに応じた適切な静的ファイルをブラウザに送信する。 以降の処理（ページ遷移など）は、静的ファイルに組み込まれたJavaScriptによっておこなわれる。

    実装のポイント

    実装のポイントは、以下の３点があげられる。

    1. 各モジュールの持つ役割をはっきりとさせ、個々のモジュールが独立して動作するようにすること。
    2. 開発環境を整え、手早く実行結果を確認、修正できるようにすること。
    3. Webページの応答が速いこと。

    1 について、例えばリバースプロキシはSSL通信を実装するためだけに使用しており、その後のすべての処理は ホームページサーバーが処理している。この設計により、ホームページサーバーの 変更が、SSL通信機能に影響を及ぼす心配がなくなっている。また、別のSSL対応したい サーバーアプリケーションにもこのリバースプロキシを流用することが可能になっている。

    2 について、例えばソースコードのバージョン管理にはgitを用いている。過去にリリースしたホームページには タグを付け、いつでも前のホームページの状態に戻すことができるようにしている。
    また、TypeScriptによる開発、ユニットテスト、静的解析を行えるようにしている。これにより、 ソースコードに変更を加えた際の検証や修正が速く、手軽に行えるようになり、手作業での 確認の手間を大きく減らせている。

    3 について、Next.jsフレームワークを用いることで高速な応答を実現させている。 一般的なReact.jsのアプリケーションでは、Webページのリクエストを受けてからページの内容を 作り始めるので、その分表示されるまでに時間がかかる。Next.jsでは、リクエストを受ける前の 時点で作れるページの内容をあらかじめ作っているので、表示が速くなっている。

    実装内容
    全体構成

    構成はDockerを使って実装している。 構成ファイル（docker-compose.yml）は以下のとおり。

    # docker-compose.yml
version: "3.9"
x-logging:
  &default-logging
  options:
    max-size: "10m"
    max-file: "3"

services:
  daiki-homepage:
    build: ./daiki-homepage
    expose:
      - "3000"
    logging: *default-logging
    restart: always
  nginx:
    build: ./nginx
    environment:
      - HOMEPAGE_HOST=daiki-homepage:3000
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - type: bind
        source: /etc/letsencrypt/live/daikiosaki.com/fullchain.pem
        target: /etc/ssl/certs/fullchain.pem
        read_only: true
      - type: bind
        source: /etc/letsencrypt/live/daikiosaki.com/privkey.pem
        target: /etc/ssl/private/privkey.pem
        read_only: true
      - type: bind
        source: ./certbot-webroot
        target: /usr/share/nginx/html
        read_only: true
    logging: *default-logging
    restart: always

    リバースプロキシコンテナ（nginx）とホームページサーバーコンテナ（daiki-homepage）の 二つのコンテナで構成されている。 bind mount を利用し、ホストマシン上のSSL証明書をリバースプロキシで使用するように構成した。 ホストマシン上のSSL証明書は certbot を利用して取得し、自動で更新するように設定した。

    プロキシサーバー（nginx）の構成

    構成ファイルは以下の通り。dockerのnginxイメージを使い、環境変数からサーバーのアドレスを取得できるようにしてある。

    # default.conf.template
upstream channels-backend {
    server ${HOMEPAGE_HOST};
}

server {
    listen 80 default_server;
    listen 443 ssl default_server;
    server_name _;
    ssl_certificate /etc/ssl/certs/fullchain.pem;
    ssl_certificate_key /etc/ssl/private/privkey.pem;
    return 444;
}

server {
    listen 80;
    server_name daikiosaki.com;

    location /.well-known/acme-challenge/ {
        root /usr/share/nginx/html;
    }

    location / {
      return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl;
    server_name daikiosaki.com;
    ssl_certificate /etc/ssl/certs/fullchain.pem;
    ssl_certificate_key /etc/ssl/private/privkey.pem;

    error_page 500 502 503 504  /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }

    location /static/ {
        root /usr/share/nginx;
    }

    location /robots.txt {
        root /usr/share/nginx;
    }

    location / {
        proxy_pass http://channels-backend/;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Host $server_name;
    }
}

    certbotのssl証明書の自動取得用に、/.well-knownだけ特別に公開し、その他のURLはすべてホームページサーバーに振り分けている。

    ホームページサーバー（Next.js）の構成

    ディレクトリ構成は以下の通り。フロントエンドフレームワークのNext.jsの構成に則った ディレクトリ構成にしている。 ホームページサーバーアプリケーションはTypeScriptで開発できるように構成した。 さらに、型の検証を含むユニットテスト、およびlinterによるコードの静的解析をできるように構成した。

    daiki-homepage
|-- .eslintrc.js
|-- .gitignore
|-- jest.config.js
|-- .next
|-- next.config.js
|-- next-env.d.ts
|-- package.json
|-- public
|   |-- favicon.ico
|   |-- images
|   `-- manifest.json
|-- README.md
|-- src
|   |-- assets
|   |-- components
|   |-- pages
|   `-- typings.d.ts
|-- tsconfig.json
|-- tsconfig.test.json
`-- yarn.lock

    srcディレクトリ以下がソースコード、publicディレクトリが公開するファイルになっており、 その他のファイルは設定用のファイルである。設定ファイルには、TypeScriptや ユニットテストツール、静的解析ツールを使うのに必要な設定が書かれている。 src/pagesはページの内容をReactで書いたもので、ここの下に配置したファイルはNext.jsによって、 自動的にURLが割り振られる。src/componentsはpagesの中で使うUIの部品がおかれている。 src/assetsには、公開はせずにページに直接埋め込むようなファイル（例えばテキストファイル）を 配置している。

  • 2020/11 ~ 2021/3

    東証一部上場 システムインテグレーション事業会社

    SDNの情報を収集し、自動で構成図を描画するソフトの作成

    • Python
    • JavaScript
    • Open Distro for Elasticsearch
    • Node.js
    • React.js
    • D3.js
    • Docker
    • Redmine
    • Git
    • GitLab
    • CentOS7
    • Atom

    社内のSoftware Defined Networkソフトウェアから情報を収集してElasticsearchのインデックスに格納するCLIツールの開発、およびOpendistro for ElasticsearchをベースにしたWebアプリケーションの開発をおこないました。

    thumbnail
    プロジェクト概要

    Software Defined Network (SDN) により、ネットワーク構成をソフトウェアを用いて 制御することが可能になっていた。しかし、そのネットワーク構成が最終的にどうなったのか、 結果を視覚的に表現する方法がなく、管理が困難になっていた。 そこで、SDNの管理情報をもとに、その構成を表として表示・出力する機能が必要である。 SDN情報を管理するソフトウェアから必要な情報を抽出し、結果をファイルに出力する アプリケーションの開発を行う。

    プロジェクト基本情報
    • 人数 6人＋1人 プロジェクトマネージャー1人、スクラムマスター1人、自分を含む開発者4人＋プロダクトオーナー1人
    • 開発期間 5ヶ月ほど
    職務内容
    • システム全般の構成設計
      3つの機能に分けて設計した。1つはSDN管理ソフトウェアからデータを抽出し、整形してElasticsearchに格納する（以下収集ソフト）。 1つはElasticsearchに格納されたデータをブラウザの画面上に表示する。 収集ソフトのインターフェースも兼ねる（以下Webアプリ）。 1つはシステム全体の構成を管理する。どこにファイルを置くか、 どんな配布形式でビルドするかを決める役割を持つ（このプロジェクトではRPM形式でビルドした）。 機能を分けたことにより、例えば収集ソフトだけを別のソフトウェアに流用して開発コストを 下げたり、ビルド形式だけを変更する（例えば Docker image など）こともできるようになる。
    • 収集ソフトの設計・実装・テストコード作成
      収集ソフトはPythonで作成した。収集ソフトは、SDN管理ソフトウェア（またはファイル） からデータを収集し、共通の形式に変換して検索エンジン（またはファイル）に保存する役割を持っている。
    • Webアプリの設計・実装・テストコード作成
      WebアプリはTypeScriptで作成した。オープンソースの kibana フレームワークに沿って、 REST API の設計・実装・テストとReactでのGUI作成を行った。
    • ビルド用ソースツリーの一部管理
      ビルド用ソースツリーはシステム全体をひとまとめにし、配布可能な状態にビルドする役割を持つ。 収集ソフトの入口になるスクリプトを用意する必要があるので、その部分を作成した。 全体の構成は社内独自のビルド用構成を流用しているらしい。
    • 開発環境の作成
      gitLabでのバージョン管理を行い、その設定を行った。権限の設定や、間違ってpushしないように するための設定、どういう風にブランチを切るかの方針など、実際に試してみながら調整した。 また、テストコードやLinterを実行するための設定を行い、ワンコマンドで実行できるようにした。
    • ソースコードのレビュー・マージ
      gitLabのマージリクエストを利用したレビューを行った。処理内容に沿った適切な関数名に なっているか、設計に則った場所に処理が記述されているか、テスト関数の名前と、それに 対応するテスト内容が十分かどうかなど。
    • Dockerでのビルド方式の検討・作成
    • スケジュールの範囲で実現可能な範囲の提案と、代替案の提案。既存の要件を、必須な要件と 使い勝手に関する要件に分け、使い勝手に関する要件を後回しにすることを提案した。

  • 2020/3 ~ 2020/11

    東証一部上場 システムインテグレーション事業会社

    SDNから情報を収集し、ブラウザの画面上で比較して表示するWebアプリケーションの開発

    • Python
    • JavaScript

    Elasticsearchからデータを読み出し、表として表示するWebアプリケーションの開発を行いました。

    thumbnail
    準備中