2022-12-25

マルチステージビルドの利用-Docker

Docker React

Dockerのマルチステージビルドを利用して、Reactアプリの開発環境と本番環境(ビルド環境)を作成する。
※以下の記事の続きとなります。 maya313.hatenablog.com

Dockerで利用するファイル

Dockerfile

FROM node:18.12.1-alpine as common

# Develop
FROM common as dev
WORKDIR /usr/src/app

# Production
FROM common as builder
COPY ./react-app /usr/src/app
WORKDIR /usr/src/app/react-app
RUN npm install
RUN npm run build

FROM nginx:1.23.3 as prod
RUN rm -r -f /usr/share/nginx/html
COPY --from=builder /usr/src/app/react-app/build /usr/share/nginx/html

docker-compose.yml

version: '3.9'

services:
  dev_react_app:
    build:
      context: .
      dockerfile: Dockerfile
      target: dev
    volumes:
      - ./react-app:/usr/src/app
    command: sh -c "cd react-app && npm start"
    ports:
      - "3000:3000"
  prod_react_app:
    build:
      context: .
      dockerfile: Dockerfile
      target: prod
    image: maya/react_app
    ports:
      - "80:80"

開発環境の利用方法

$ docker-compose up dev_react_app

本番環境(ビルド環境)の利用方法

$ docker-compose build prod_react_app

2022-12-17

Translatorの利用方法-Azure

Azure PHP

<?php
    $get_param = "api-version=3.0&to=en&textType=html";
    $url = "https://api.cognitive.microsofttranslator.com/translate?" . $get_param;

    $region = "japaneast";
    $key = "xxxxxxxxxxxxxxxxxxxx";
    $header = array(
        "Content-Type: application/json",
        "Ocp-Apim-Subscription-Region: " . $region,
        "Ocp-Apim-Subscription-Key: " . $key
    );

    $text = "こんにちは、世界!";
    $param = array(
        array(
            "Text" => $text
        )
    );
    $param = json_encode($param);

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_URL, $url); 
    curl_setopt($ch, CURLOPT_HEADER, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, $header); 
    curl_setopt($ch, CURLOPT_POSTFIELDS, $param);

    $result = curl_exec($ch);

    curl_close($ch);

2022-11-26

Reactの開発環境を構築する-Docker

Docker React

前提条件

・Docker Composeがインストールされている。
・Reactプロジェクトを作成している。

1. 必要なファイルを作成する

以下の内容で「Dockerfile」と「docker-compose.yml」を作成し、Reactプロジェクトと同じフォルダ階層に配置してください。
※Reactプロジェクトのフォルダ名は「react-app」とします

Dockerfile

FROM node:18.12.1-alpine
WORKDIR /usr/src/app

docker-compose.yml

version: '3.9'

services:
  react-app:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./react-app:/usr/src/app
    command: sh -c "cd react-app && npm start"
    ports:
      - "3000:3000"

2. 開発環境を起動する

$ docker-compose up

3. 動作確認

以下のURLにアクセスして、Reactプロジェクトのページが表示されることを確認する。
http://localhost:3000/

2022-11-19

既存のAWSリソースをCloudFormationで管理する-AWS

AWS

Former2を利用して既存のAWSリソースのCloudFormationテンプレートを生成し、CloudFormationでAWSリソースを管理できるようにする。

1. Former2で利用するIAMユーザーの作成

以下の設定でIAMユーザーを作成する。
・AWS アクセスの種類：プログラムによるアクセス - アクセスキーを使用
・アクセス権限：ReadOnlyAccess

IAMユーザー作成後にアクセスキーを作成し、アクセスキー IDとシークレットアクセスキーをメモしておく。

2. 認証情報の設定

Former2の認証情報設定ページで作成したアクセスキー IDとシークレットアクセスキーを入力する。
https://former2.com/#section-setup-credentials

認証情報を入力後、ページ右上の「Scan Account」を実行して既存のAWSリソースを取得してください。

3. CloudFormationテンプレートの生成

左メニューからCloudFormationテンプレートに含めたいAWSリソースを選択してください。
例えばEC2を含める場合は左メニューのCompute→EC2に移動し、インスタンスのチェックボックスを入力して「Add Selected」をクリックしてください。

その後、ページ左上の「Generate」を実行するとCloudFormationテンプレートが生成されます。「Copy」や「Import」をしてCloudFormationテンプレートを保存してください。

4. CloudFormationテンプレートのインポート

CloudFormationのページで右上の「スタックの作成」をクリックし、「既存のリソースを使用 (リソースをインポート)」を選択してください。

ステップを進めていき、テンプレートの指定で先ほど生成したCloudFormationテンプレートをアップロードしてください。

そのままステップを進めていき、インポート完了となります。
これでCloudFormationテンプレートに含まれたAWSリソースをCloudFormationで管理できるようになりました。

2022-11-13

SFTPサーバーの設定-CentOS7

CentOS Linux

1. SFTPユーザーの作成とパスワード設定

$ useradd test-user1
$ passwd test-user1

2. chroot用のディレクトリの作成

chroot用のディレクトリは所有者をroot:root、パーミッションを755にする必要があります。

$ sudo mkdir /var/sftp
$ chown root:root /var/sftp
$ chmod 775 /var/sftp

3. 設定ファイルの変更

「sshd_config」ファイルの末尾に以下の設定を追記する。

/etc/ssh/sshd_config

...
Match User test-user1
        ChrootDirectory /var/sftp
        ForceCommand internal-sftp
        PasswordAuthentication yes

設定の追記後にsshdサービスの再起動を行う。

$ systemctl restart sshd

4. 接続確認

$ sftp test-user1@example.com

2022-11-06

Docker Desktop for Windowsを利用する-Docker

Docker

1. Docker Desktop for Windowsのインストール

以下のURLからDocker Desktop for Windowsをダウンロードしてインストールする。

docs.docker.com

2. Nginxコンテナの作成と起動

サンプルとしてNginxコンテナの作成と起動を行う。
PowerShellで以下のコマンドを実行する。

> docker run -d -p 80:80 nginx

3. Nginxコンテナの動作確認

以下のURLにアクセスして、NginxのWelcomeページが表示されることを確認する。
http://localhost/

2022-10-31

TSVファイルへの書き込み-PHP

PHP

<?php

$items = array(
    array('ruby', '1000', '1'),
    array('pearl', '2000', '5'),
    array('peridot', '5000', '10')
);

$fp = fopen('item.tsv', 'w');

foreach($items as $row){
    fputcsv($fp, $row, "\t");
}

fclose($fp);