Hero Image
Djangoの開発・本番環境構築

0. 初めに Dockerを利用しPython、Django、PostgreSQL、Gunicorn、Nginxの開発・本番環境の構築します。 Dockerとはコンテナ型の仮想環境を作成・配布・実行できるプラットフォームとのことです。Dockerを使えばWebアプリケーションだけでなくサーバーの設定などのインフラもまとめて管理できて、かつバージョンやOSの差を気にすること無く環境の構築ができるというメリットがあります。 Pythonの仮想環境としばしば比較されることがありますが、Pythonの仮想環境はあくまでPythonの依存関係のみをカプセル化し、DockerはOS全体をカプセル化するという違いがあります。 ※参考サイト1 0-1. 開発環境 OS : Ubuntu 22.04.1 LTS on WSL2 Docker : 20.10.22 Docker Compose : v2.14.1 0-2. VPS環境 WebARENA Indigo : メモリ 4G, ストレージ:SSD 80GB, CPU:2コア OS:Ubuntu 22.04 Docker : 20.10.22 Docker Compose : v2.14.1 VPS-IP : 160.248.11.107 Container : Debian GNU/Linux 11 (bullseye) 0-3. 共通環境 Python : 3.11.1 Django:4.1.4 Nginx:1.23.3 Gunicorn:20.1.0 PostgrSQL:14.0 psycopg2-binary:2.9.3 0-4. Python3.11 Python 3.11はPython 3.10と比べて平均で 25%速くなりました。ワークロードにも寄りますが、10%から60%の速度向上が見込めます。これは「起動時の高速化」と「実行時の高速化」の二つによって達成されています。 起動時の高速化:起動時間が10-15%高速化 実行時の高速化:最大 2~20%の速度向上 SSLモジュール Python 3.

Hero Image
WebArena Indigoの環境設定

1.スタートアップガイド(WebARENA Indigo) Ubuntu22.04 スタートアップガイド コントロールパネルにログインする(Indigo) SSH鍵を作成する(Indigo) ※private.txtは、必ず保存します。後で使います。 インスタンスを作成する(Indigo) SSH接続でインスタンスにログインする(Indigo) 2.SH接続/ログイン Tera TermでインスタンスへSSH接続/ログインができません。 ※2022年6月時点にて、特定OSの初期状態では Tera Term でログインができない事象を確認しております。これは、OSのSSH サービスにて ssh-rsa がデフォルトで無効にされ、公開鍵認証 を利用した SSH アクセスができない事象となります。 暫定的に ssh-rsa を有効にして、インスタンスへTera TermでSSH接続できるようにする手順を下記にご案内しますので、ご参考ください。なお、下記手順に関する技術的なお問い合わせにつきましては、サポート対象外とさせていただきます。 (※)古い暗号化方式を適用させるため、セキュリティへの影響を検討のうえ本手順を実施してください。 PRETTY_NAME="Ubuntu 22.04 LTS" NAME="Ubuntu" VERSION_ID="22.04" VERSION="22.04 (Jammy Jellyfish)" 2-1.手順 Tera Term 以外の ssh 接続できるクライアント 「Windows の PowerShell」で接続します。 PowerShell の書式 > ssh -i 鍵ファイルのパス OS用の初期ユーザー名@IPアドレス 例 (Ubuntu の場合) > ssh -i C:\Users\hogehoge\Documents\private_key.txt ubuntu@192.168.1.1 The authenticity of host '192.168.1.1 (192.168.1.1)' can't be established. ECDSA key fingerprint is SHA256:gayL1ESEnTe6tOQD5HU6Xtjt8mYI8hz0jvCC7l10Bfk.

Hero Image
Ubuntu22.04 LTSの基本構築

改定箇所 2022-07-05:GitHub Token 修正 コマンドラインでGitHubに接続するためにアクセストークンが必要となりました 「2-8. GitのUbuntuへ導入」を修正 Token:ghp_xxxxx 1. 概要 「システム開発・デプロイ環境の構築」の重要性について、以下の2つ挙げることができます。 開発エンジニアは、開発環境を構築する手間が省き、メンテナンスを容易にする Dockerイメージの中に既に開発に必要なものは入っているので、開発エンジニアが自ら開発環境を構築する必要はない。 開発環境と本番環境で全く同じ構成を実現したい。 開発環境で動作したコンテナをそのまま本番環境で動作させるので、開発環境と本番環境で動作するものは寸分違わず同じものとなる。 開発・デプロイ環境の構築の説明資料として、以下のようにに分けて説明します。 (1-1)WSL+Ubuntuインストール (1-2)GitHubへの登録と設定 (1-3)Netlifyの登録と設定 (1-4)VPSへの登録と設定 (1-5)GoogleDomainの登録と設定(メール) (1-6)WSL+Ubuntu20.04+Dockerに関わる設定 (1-7)WSL2+Ubuntu20.04+Docker-補足 (1-8)(1-8)開発・デプロイ手順 1-1. WSLとは Linux 用 Windows サブシステムを使用すると、開発者は、従来の仮想マシンまたはデュアルブート セットアップのオーバーヘッドなしで、ほとんどのコマンド ライン ツール、ユーティリティ、アプリケーションを含む GNU/Linux 環境を変更せずそのまま Windows 上で直接実行できます。 1-2. WSL2とは WSL 2 は、Linux 用 Windows サブシステムが Windows 上で ELF64 Linux バイナリを実行できるようにする、Linux 用 Windows サブシステム アーキテクチャの新しいバージョンです。 その主な目標は、ファイル システムのパフォーマンスを向上させること と、システム コールの完全な互換性 を追加することです。 1-3. WSL2の機能 OS ファイル システム間でのパフォーマンス Linux ファイル システムのルート: \wsl$\Ubuntu-18.04\home<user name>\Project Windows ファイル システムのルート: C:\Users<user name>\Project

Hero Image
Djangoのインストール

1. Djangoの開発環境を構築 ここでは、wsl+ubuntu+python+djangoの開発環境を構築します。 Django は、動的な Web サイトやアプリケーションを開発するためのフル機能の Python Web フレームワークです。Django を使用すると、Python Web アプリケーションをすばやく作成し、フレームワークに依存して手間のかかる作業を大幅に行うことができます。 このガイドでは、Ubuntu22.04サーバーでDjangoを起動して実行します。インストール後、サイトの基礎として使用する新しいプロジェクトを開始します。 1-1. パッケージからのグローバルインストール 参考URL:DigitalOcean Windows11 WSL:Linux 用 Windows サブシステム ディストリビューション OS:“Ubuntu 22.04.1 LTS” Python 3.10.6 pip 22.3.1 from /home/matsu/.local/lib/python3.10/site-packages/pip (python 3.10) sudo apt update python3 -V Output Python 3.10.6 sudo apt install python3-django django-admin --version Output 4.1.4・・・OK 1-2. サンプルプロジェクトの作成 Django をインストールすると、プロジェクトのビルドを開始できます。プロジェクトを作成し、仮想環境を使用して開発サーバーでテストする方法について説明します。 プロジェクトのディレクトリを作成 mkdir ~/django-test cd ~/django-test 仮想環境を作成します。 python3 -m venv my_env 環境をアクティブ化します。 source my_env/bin/activate (my_env) matsu@RYZEN-PC:~/workspace/django-test$ Djangoをインストールします。 pip install django (or pip install django==4.

Hero Image
Ubuntu 22.04でPostgres、Nginx、Gunicornを使用してDjangoをセットアップ

1. 初めに Djangoは、PythonアプリケーションやWebサイトを軌道に乗せるのに役立つ強力なWebフレームワークです。Djangoには、コードをローカルでテストするための簡略化された開発サーバーが含まれていますが、本番環境に関連するものでも、より安全で強力なWebサーバーが必要です。 このガイドでは、Djangoアプリケーションをサポートおよび提供するために、Ubuntu22.04にいくつかのコンポーネントをインストールして構成します。デフォルトのSQLiteデータベースを使用する代わりに、PostgreSQLデータベースを設定します。アプリケーションとインターフェイスするように Gunicorn1 アプリケーションサーバーを構成します。次に、GunicornにリバースプロキシするようにNginxを設定し、アプリを提供するためのセキュリティ機能とパフォーマンス機能にアクセスできるようにします。 Digtal Ocean2を参考にWSL上に構築していきます。 2. 前提条件と目標 VPS : Ubuntu22.04 on WebAREANA Indigo フレームワークはDjango DBはPostgreSQL アプリケーションサーバはGunicorn WebサーバはNginx VSCodeからSSH接続環境 VPS-IP : 160.248.11.107 ubuntu : password Djangoは仮想環境内にインストールします。プロジェクトに固有の環境にDjangoをインストールすると、プロジェクトとその要件を個別に処理できるようになります。 データベースとアプリケーションを稼働させたら、Gunicornアプリケーションサーバーをインストールして構成します。これはアプリケーションへのインターフェイスとして機能し、クライアント要求をHTTPからアプリケーションが処理できるPython呼び出しに変換します。次に、Gunicornの前にNginxをセットアップして、高性能の接続処理メカニズムと実装が簡単なセキュリティ機能を利用します。 Python 3.11は、以前の3.10よりも10〜60%高速であると主張し、次の機能を備えています。 3. VPSへのログイン 3-1. OSの初期設定(アップデート、アップグレード) sudo apt update apt list --upgradable (root change) sudo su - 4. 新規ユーザーを追加 以下rootで実行します。 adduser vpsadmin 新しく追加したユーザーにsudo権限を持たせ、sudo権限を持ったユーザーを表示して確認します。 gpasswd -a vpsadmin sudo (確認) cat /etc/group | grep sud sudo❌27:ubuntu,vpsadmin 追加したユーザーのパスワード設定 passwd vpsadmin 5. VSCodeでSSHログイン WebArena Indigoの環境設定を参照

Hero Image
HugoサイトのPWA対応

1. Hugoで構築したサイトをPWA化 1-1. PWAとは PWAとは、「Progressive Web Apps」の略称で、モバイル向けWebサイトをスマートフォン向けアプリのように使えるようにする仕組みです。 PWAはそれ自体が何か特殊な一つの技術、というわけではありません。レスポンシブデザイン、HTTPS化など、Googleが定める要素を備えたWebサイトであり、オフラインやプッシュ通知に対応するためのブラウザAPI(Service Workerなど)を利用しているWebサイトをPWAと呼びます。 Web アプリ マニフェストを追加する方法 本サイトでは、トップページのみPWA化となります。 1-2. 手順 manifest.webmanifestの作成 icon画像の作成 icon画像の配置 manifest.webmanifestの修正と配置 ブラウザでmanifest.webmanifestの内容が表示されていることを確認 Service Workeの作成 Service Workeの配置と確認 1-3. manifest.webmanifestの作成 Simi Cartのサイトは、PWA マニフェスト ジェネレーターとして「Web アプリ マニフェスト」と、PWA 用にサイズが最適化されたアイコンを自動的に生成してくれます。 display:standaloneとしました。 Web アプリを開いて、スタンドアロン アプリのようなルック アンド フィールにします。アプリは、ブラウザーとは別の独自のウィンドウで実行され、URL バーなどの標準のブラウザー UI 要素を非表示にします。 scope:ブラウザーがアプリ内にあると見なす URL のセットを定義し、ユーザーがいつアプリを離れたかを判断するために使用されます。scopeは、Web アプリのすべてのエントリ ポイントと出口ポイントを包含する URL 構造を制御します。scope,scope,start_url,scope内に存在している必要があります。 scope が相対 URL である場合、ベース URL はマニフェストの URL になります。 スコープは、ナビゲーションを現在のサイトに制限します。 "scope": "https://example.com/" ナビゲーションを現在のサイトのサブディレクトリーに制限します。 "scope": "https://example.com/subdirectory/" (注意)scope:ユーザーがアプリ内で の外部に移動するリンクをクリックするscopeと、リンクが開き、既存の PWA ウィンドウ内でレンダリングされます。 target="_blank"リンクをブラウザー タブで開く場合は、タグに追加する必要があります。Android では、リンクはChrome カスタム タブ**target="_blank"**で開きます。 { "theme_color": "#a4115e", "background_color": "#f2f4f4", "display": "standalone", "scope": "https://raizin.

Hero Image
WSLに複数のインスタンス

WSL2に1つのディストロから複数のインスタンスを作成方法 1. はじめに WSL2 では Linux ディストリビューション(以下 ディストロと表記します)を導入することができますが、通常ですと1種類のディストロを複数個(複数のインスタンス)導入することはできません。しかし、wsl.exe コマンドを使えば実現可能です。本記事では、この手順について説明します。 開発で使用する言語に応じて、linux を使い分けることができるので、環境をきっちり分けたいときに便利です。 2. 手順 Ubuntu を複数インスタンス導入する手順について説明します。 ※ WSL 2 の導入手順については省略します。 マイクロソフト・ストア Ubuntu22.04LTS Ubuntuで利用するユーザー名とパスワードを入力する。 user:xxxx PW:xxxxxxx "\\wsl.localhost\Ubuntu-22.04" Ubuntuのインストール直後のrootのpassword設定 user:root PW:xxxxxx root@RYZEN-PC:~# sudo passwd root New password: Retype new password: passwd: password updated successfully Linuxの確認 root@RYZEN-PC:/home# cat /etc/lsb-release DISTRIB_ID=Ubuntu DISTRIB_RELEASE=22.04 DISTRIB_CODENAME=jammy DISTRIB_DESCRIPTION="Ubuntu 22.04 LTS" root@RYZEN-PC:/home# 2-1. 通常通りディストロをインストールする(インスタンスを作成する) Microsoft Store から Ubuntu を導入します。 導入後に、PowerShell で wsl.exe -l -v コマンドを実行した結果が以下です。 (base) PS C:\Users\RYZEN> wsl.exe -l -v NAME STATE VERSION * Ubuntu-20.

Hero Image
WSL-Ubuntuの導入

1. 概要 「システム開発・デプロイ環境の構築」の重要性について、以下の2つ挙げることができます。 開発エンジニアは、開発環境を構築する手間が省き、メンテナンスを容易にする Dockerイメージの中に既に開発に必要なものは入っているので、開発エンジニアが自ら開発環境を構築する必要はない。 開発環境と本番環境で全く同じ構成を実現したい。 開発環境で動作したコンテナをそのまま本番環境で動作させるので、開発環境と本番環境で動作するものは寸分違わず同じものとなる。 1-1. WSLとは Linux 用 Windows サブシステムを使用すると、開発者は、従来の仮想マシンまたはデュアルブート セットアップのオーバーヘッドなしで、ほとんどのコマンド ライン ツール、ユーティリティ、アプリケーションを含む GNU/Linux 環境を変更せずそのまま Windows 上で直接実行できます。 1-2. WSL2とは WSL 2 は、Linux 用 Windows サブシステムが Windows 上で ELF64 Linux バイナリを実行できるようにする、Linux 用 Windows サブシステム アーキテクチャの新しいバージョンです。 その主な目標は、ファイル システムのパフォーマンスを向上させること と、システム コールの完全な互換性 を追加することです。 1-3. WSL2の機能 OS ファイル システム間でのパフォーマンス Linux ファイル システムのルート: \wsl$\Ubuntu-18.04\home<user name>\Project Windows ファイル システムのルート: C:\Users<user name>\Project Windows からの Linux ネットワーク アプリへのアクセス (localhost) Linux ディストリビューションでネットワーク アプリ (たとえば、Node.js または SQL Server で実行されるアプリ) を構築する場合、(通常の場合と同様に) localhost を使用して (Microsoft Edge または Chrome インターネット ブラウザーなどの) Windows アプリからアクセスすることができます。

Hero Image
JamStackサイト制作手順

1.各種登録 カスタムドメイン登録サイト:例)Google Domain ソース管理サイト:例)Github,Gitlab アプリのビルド&デプロイ:例)Netlify ヘッドレスCMS:例)microCMS、Strapi(自分でクラウドに構築) 2.画面設計と文章・画像の準備 メインアイコン、faviconの作成 アイキャッチ画像の準備(wepb、svg、jpegなど) 顧客の準備できる画像の加工 基本的な顧客情報、商品などの説明 3.Hugoのテーマの選択 Hugoのテーマは、200以上あります。 当社では、「Hugo Serif」を採択しています。 4.HugoのインストールとGitHubへpush ローカルPCへHugoのテーマをインストールします。 当社では、WSLのUbuntu22.04となります。 GitHubへソースをpushします。 5.Hugoの各種設定と配置 基本的な設定をします 画像、文章を配置します。 6.ヘッドレスCMS ヘッドレスCMSは、お客様が必要な場合に準備します。 当社のサイトは、ローカルPCで編集したものをGitHubへpushしています。 ヘッドレスCMSのAPI連携を構築します。 小さな個人・法人サイトでは、microCMSは、無料で使えるの便利です。 Strapiは、ある程度のスペックが必要ですので注意が必要です。 弊社のサンプルアプリは、Strapiを使っています。 7.Netlifyへ連携 Netlifyは、Github,GitLabと簡単に連携できます。 カスタムドメインとSSLの設定をします。 「Google DomainのDNS」で事前にNetlifyのIPを設定しておきます。 8. デモアプリ Strapiを使ったサンプルアプリ(SQLite) Sveltekit×Render.com(Strapi)×Github×Netlify 以上