MyDNSのサイトへ移動し、「JOIN US」からユーザ登録を行う結びつけるIP一つごとに一つアカウントが必要となる30日更新通知を行わないとアカウントは削除される
yum -y install samba
動的IPとドメイン名を結びつけるための仕組みDDNSを提供するアドレスへ、一定期間ごとにIPを通知することで成り立つ
ユーザ登録するとメールでIDとパスワードが送られてくる両方とも自分で変更することはできないログインしたら、「DOMAIN INFO」を選ぶ最初の方に使用可能なドメイン名の一覧があるので、好きなものを選ぶ下の方までスクロールすると以下の項目があるので、選んだドメイン名を入力するDomain* : (FQDN)選んだドメイン名のうち???の部分は自分でオリジナルの名前をつける名前がかぶっていなければ設定できる。さらに以下の項目を設定するHostname*, Type*, Content, Delegateid or your id. (Hostname is not FQDN)アスタリスクを設定することによって、一つ一つ設定しなくても複数のサブドメインに対応できる
GCEではタイムゾーンがUTCになっている特に問題を感じなければそのままでもかまわないが、日本時間に直すには以下の設定を行う確認date結果Tue Aug 21 07:43:12 UTC 2018設定timedatectl set-timezone Asia/Tokyo確認date結果Tue Aug 21 16:44:44 JST 2018
yum -y install bind-utils
dd if=/dev/zero of=/swapfile bs=1M count=1024chmod 600 /swapfilemkswap /swapfileswapon /swapfileecho /swapfile swap swap defaults 0 0 >> /etc/fstab サイズは1GBだが、変更したければcountの値を調整してほしい確認free結果 total used free shared buff/cache availableMem: 601792 131452 367260 5468 103080 363132Swap: 1048572 0 1048572
Linux上でWebアプリケーションを組む場合、面倒になるのがコンテンツのアップロードだ Sambaを利用することによって、直接ファイルが編集できるようになるので、そのあたりがかなり楽になるファイアウオールに穴を開ける(GCEを使用している場合) パッケージのインストール サービスの起動と有効化 Samba用ユーザの作成 Sambaの設定 確認 書き込みアクセスの許可
基本コマンドとviエディタの使い方は覚えておこう
以下のフォルダを開き、コンテンツが編集可能な状態にする\\アドレス\www
さあ、害虫どもを探す時間だ！ めでたくブレークポイントに引っかかった しかしこんな短いプログラムではゴキブリの一匹すら入り込む余地はない
テスト環境ならば、ステップ実行の一つもできなければ始まらない。ということでリモートデバッグ環境を構築してみようサーバ側で再びコピペ VSCodeの設定 RLoginの設定 VSCodeで確認
接続までの流れは初期設定の項目を参照して欲しい ここではxdebugに接続するためのポートフォワードの設定のみ記述する 新規で以上のような設定を作る。 リモート側のポートを変更したい場合は上のポート、ローカル側のポートを変更したければ下のポート設定をいじれば別のポートを利用することも可能だ
当然のことではあるが、xdebugのプラグインは入れておこう この設定により、VSCodeで編集したコードはそのままサーバで実行され、デバッグもそのまま可能になるlaunch.json{ "version": "0.2.0", "configurations": [ { "name": "Listen for XDebug", "type": "php", "request": "launch", "port": 9000, "pathMappings": { "/usr/share/nginx/html": "${workspaceRoot}/" } } ]}
sshで接続し、以下のコマンドをコピペだ。sudo sh -c 'echo -e "xdebug.remote_enable = 1\nxdebug.remote_autostart = 1" > /etc/php.d/90-xdebug_custom.ini'sudo systemctl restart php-fpm これでサーバ側の設定は完了だ。VSCodeでデバッグするなら、そちらの準備も必要となる
まずはブラウザにIPアドレスを放り込んでみる これが出ていれば、Webサーバは正常だ。 では次にsambaで接続してみる。UNCパスで接続するので、Windowsならファイルエクスプローラから「\\IPアドレス」だ このwww共有にアクセスすると、nignxのドキュメントルートと繋がる。編集はVSCodeなどでフォルダごと開いておくと効率が良いだろうindex.php<?phpphpinfo(); 上記のファイルを作成し、再びブラウザから確認してみる こんな感じの画面が現れれば成功だ。 ここに障害が存在するとしたら、プリエンプティブでサーバを作った場合に発生する、Googleによる無慈悲なシャットダウン信号だけだ
以下のプラグインをインストールするPHP Debug
プラグインのインストール フォルダを開く デバッグ設定
ファイルはviなどのテキストエディタで作成する/var/www/www/index.html<html> <body> www </body> </html> /var/www/www2/index.html<html> <body> www2 </body> </html>
apt -y install nginx systemctl enable nginx systemctl start nginx
mkdir /var/www/www mkdir /var/www/www2ディレクトリの場所は任意で構わない
cronで定期実行するため、以下のファイルを作成するCentOSの場合は*.confという名前にしていたが、ubuntuではファイル名に拡張子はつけない/etc/cron.d/ddnsSHELL=/bin/bashPATH=/sbin:/bin:/usr/sbin:/usr/binMAILTO=root@reboot root sleep 5;curl -o /dev/null -s --user ID:PASS https://www.mydns.jp/login.html*/10 * * * * root curl -o /dev/null -s --user ID:PASS https://www.mydns.jp/login.html 起動時と10分ごとに通知を行う設定である有効にするには以下のコマンドを使うsystemctl reload cron
一昔前はWebサーバと言えばApacheだったが、軽量で高速に動作するサービスが求められnginxが利用されることが増えている ここではnginxの基本的な設定方法を紹介する
前回の設定ファイルが残っているのなら削除するrm -f /etc/nginx/conf.d/www.conf /etc/nginx/conf.d/www2.confsystemctl reload nginx
yum -y install certbot
この他にもう一つだけやっておくことがある。それはセキュリティに穴を開けるという行為だ GCPのWEBインタフェイス右上の一番左にあるGoogleCloudShellを開き、ポート445を解放するのだ。右だの左だのなかなかに忙しい コンソールが開いたら以下の内容を貼り付けるgcloud compute firewall-rules create allow-samba --direction=INGRESS --priority=1000 --network=default --action=ALLOW --rules=tcp:445 --source-ranges=0.0.0.0/0 これでsambaが踊り狂うのを止める者はいない。
インスタンスが作成できたらSSHボタンを押そう。コピペの歴史はここから始まるのだ 無事ログインできたらついにコピペの時だsudo rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-7.rpmsudo sed -i '1,/enable/s/0/1/' /etc/yum.repos.d/remi-php72.reposudo yum -y install samba nginx php-fpm php-xdebugsudo systemctl enable nginxsudo systemctl enable php-fpmsudo systemctl enable smbsudo sh -c 'echo -e "[www]\n\tpath=/usr/share/nginx/html\n\twritable=yes\n" >> /etc/samba/smb.conf'sudo setfacl -R -m u:$USER:rwx /usr/share/nginx/htmlsudo sed -i '1,/SELINUX=enforcing/s/enforcing/disabled/' /etc/selinux/configsudo sed -i '1,/user = /s/apache/nginx/' /etc/php-fpm.d/www.conf sudo sed -i '1,/group = /s/apache/nginx/' /etc/php-fpm.d/www.conf sudo sed -i '1,/listen = /s%127.0.0.1:9000%/var/run/php-fpm/php-fpm.sock%' /etc/php-fpm.d/www.conf sudo sed -i '1,/;listen.owner = nobody/s/;listen.owner = nobody/listen.owner = nginx/' /etc/php-fpm.d/www.confsudo sed -i '1,/;listen.group = nobody/s/;listen.group = nobody/listen.group = nginx/' /etc/php-fpm.d/www.confsudo sh -c
確認用にコンテンツを2種類用意するVirtualHost用コンテンツを用意する nginxの設定 ブラウザで確認
ブラウザからURLを入力http://IP/
[項目] [ 内容 ] OS CentOS7 WEB nginx PHP php-fpm7 File共有 samba
nginx version: nginx/1.15.5 (Ubuntu)の場合/var/www/html/index.html/usr/share/nginx/html/にもフォルダが存在するが、こちらは使われていないCentOSだとデフォルトでこちらが使われるまた、index.htmlを設置しなかった場合はトップページに以下のファイル内容が表示される/var/www/html/index.nginx-debian.html
まずは以下のような形で、GCE上にインスタンスを作る。この処理をコマンドで処理してもいいが、カスタマイズを望む人もいると思うので、ここはWebインタフェイスから行う 初期設定の項目で紹介したのと同じ物だ テストサーバなのでプリエンプティブ設定を有効にしておくと、消し忘れても勝手にシャットダウンしてくれるし、費用も多めに割引される。良いこと尽くしだ。ちなみにSambaでファイル共有を前提にするので、リージョンを遠いところに置くと悲惨な目にある。ここはおとなしく東京を選んでおこう。OSとして今回選ぶのはCentOS7だ
今回のネタは最速でPHPのテスト環境を作ることである。テスト環境といっても、本番に近い環境であることが望ましいのは当然である。今回はコピペすればあっという間に環境構築が終わるという流れでやっていきたい ローカル環境でテストするとの違い、サーバでテストするのはデプロイが面倒くさいと思う人もいるかもしれない。しかしファイル共有を有効にするので、デプロイなんて作業は存在しないコピペで作るPHPテスト環境 構築する環境 さあ、コピペの始まりだ！ 何が起こったのか？ 穴を開ける 動作確認 まとめ デバッグしてみる
AWSはAWS 認定ソリューションアーキテクトとかで技術者を囲い始めている。対するGCEは何にも無い。このままでは差が開く一方だ。とりあえずは価格の安さを強調しておこう GCEは安い、安いよ！
リージョンを東京にした場合の価格構成[東京リージョンの価格表]CPU メモリ ストレージ 通常料金 割引後料金vCPUx1(共有) 0.60GB HDD 10GB $5.22 $4.17vCPUx1 3.75GB HDD 100GB $36.37 $14.87vCPUx4 15.00GB SSD 100GB $146.78 $60.79vCPUx8 52.00GB SSD 100GB $332.11 $118.38vCPUx8 52.00GB SSD 64TB $14,793.47 $14,579.74 プリエンプティブで安くなるのは、CPUとメモリのみだ。ストレージは割引対象に含まれない。逆にプリエンプティブ構成にすると、継続利用割引という、一ヶ月稼働させ続けることによって行われる30%の割引が無くなってしまう。こちらの割引はストレージを含むのだ。そのためSSD64TB構成にするとストレージ分の割引の有無に相殺されて、料金にほとんど違いが出なくなる。 しかしSSD64TBなんて構成を作ることはまず考えられない。通常はプリエンプティブによる割引の方が、圧倒的に効果が高いのだ。
低価格で高性能サーバ、そんな夢を叶える方法GCEの特殊な料金 プリエンプティブで安くなる金額 「お前はもう死んでいる」サーバのアンデッド化 話題に上らない格安GCE
nginxの基本設定ファイル(こちらは極力直接編集しない)/etc/nginx/nginx.conf新たなサイト(VirtualHost)等を作る場合は以下にファイルを設置する/etc/nginx/sites-enabled/*新たなserver設定を追加する場合は以下の場所にファイルを設置する/etc/nginx/conf.d/*.conf設定ファイル置き場は、nginxのバージョンに応じてコロコロ変わるので、nginx.confのinclude設定を確認するのが一番早い
GCEはGoogleアカウントとクレジットカードがあれば、誰でも利用可能だ。また、利用アカウントでGCEを使ったことが無ければ、一年間もしくは$300(約33,000円)の無料お試し期間が用意されている さらにお試し枠とは別に永年無料構成が用意されている。サーバ設置のゾーンをus(アメリカ合衆国)にし、マシンタイプをf1-micro（vCPU x 1、メモリ 0.6 GB）HDD30GB以内にすると、なんとインスタンスの稼働料金が永年無料になる。永年供養が可能でびっくりだ。メモリが心許ないとはいえ、これは太っ腹だ。 GCEの料金体系として、さらに特殊なモノが一つある。それがプリエンプティブという設定だ。インスタンス作成時にプリエンプティブを有効にするかどうか設定できる。デフォルトでは無効だが、これを有効にすると、そのサーバのインスタンスは、24時間に一度くらいの割合で自動的にシャットダウンする。そして次に起動の要求を出すまで、シャットダウンしたままという無慈悲な構成だ。 そんな設定になんの意味があるのかと思うかも知れない。しかし意味はある。インスタンスを稼働させるのに必要な料金が大幅に安くなるのだ。そして強制停止にも抜け道があるのだ。
SELinuxはまともに使用するのはかなり面倒くさい設定を間違えるリスクを冒すぐらいなら無効にしてしまった方が良い・その場で無効setenforce 0・起動時に無効化 /etc/selinux/configの設定を書き換える ちんたらファイル編集するのは面倒なので、コマンド一発で済ませるsed -i '1,/SELINUX=enforcing/s/enforcing/disabled/' /etc/selinux/config
GCEをアメリカリージョンでmicro構成にしてインスタンスを構築すると、完全無料状態で利用できるしかし完全無料に天敵がいるのだそれが中国からのトラフィックだ中国への上りトラフィックは、無慈悲なことに無料枠に含まれないならばシールドを張るしかないfirewall.php#!/usr/bin/php<?php$IPLIST_ADR = "ftp://ftp.apnic.net/pub/apnic/stats/apnic/delegated-apnic-latest";$ZONE = "CN";function download($url){ $conn = curl_init($url); curl_setopt ($conn, CURLOPT_RETURNTRANSFER, true ); $response = curl_exec($conn); curl_close($conn); return $response;}echo "割り当てデータの読み出し開始\n";$listFile = download($IPLIST_ADR);if($listFile == null){ echo "読み込み失敗\n"; return -1;}echo "割り当てデータの読み出し完了\n";preg_match_all("/apnic\ $ZONE\ ipv4\ ([\d\.]+?)\ (\d+?)\ /", $listFile, $matches,PREG_SET_ORDER);$count = count($matches);printf("割り当てデータ数:%d\n",$count);$command = " firewall-cmd --permanent --new-ipset=$ZONE --type=hash:net";echo $command."\n";shell_exec($command);$fp = fopen("$ZONE.txt","wt");for($i=0;$i<$count;$i++){ $value = $matches[$i]; $icdr = fprintf($fp,"%s/%d\n",$value[1],32-(int)log($value[2],2));}$command = "firewall-cmd --p
最初に欲張りすぎたあなたが必要とする内容だ大きくするのは簡単なのに、小さくすることは簡単ではないのだ他のサイトで調べても、縮小は無理という情報しかなかっただろう無理なのではない、面倒くさいだけなのだ1 サイズを縮小したいインスタンスのスナップショットをとる2 インスタンスのスナップショットを稼働中のサーバ(元のインスタンスでもOK)の追加ディスクとして作成3 現在のOSと同じイメージを元にサイズを考慮して追加ディスクを作成4 以下のコマンドでイメージをコピー元DISKが/dev/sdb1新DISKが/dev/sdc1mkdir /mnt/disk1 /mnt/disk2mount /dev/sdb1 /mnt/disk1mount /dev/sdc1 /mnt/disk2rsync -av /mnt/disk1/ /mnt/disk2/ --exclude='/boot/' --exclude='/dev/' --exclude='/etc/fstab'umount /mnt/disk1umount /mnt/disk2rmdir /mnt/disk1 /mnt/disk25 sdcに割り当てたディスクのスナップショットをとる6 スナップショットを元に新規インスタンスを作成するやっていることは、データの全コピーであるfstabはxfsのUUIDの絡みで除外設定している/bootに関しても同様ちなみに5と6は、インスタンスを作る際にコピー先のディスクをそのまま使えば省略可能
GCEでは初期ユーザがsudoをパスワードなしで使用できるため必須の作業ではないsudo passwd root
ここでは使えそうなテクニックを記載していく予定定期スナップショット用スクリプト GCEのブートディクスを縮小する 中華バリア
ssh接続を行う場合、いくつかのクライアントソフトを選ぶことになるTeraTermなども有名どころではあるが、ここでは設定が簡単なRLoginの使い方を解説するサーバ名は選択時に表示されるだけなので適当でかまわない接続先のIPアドレスはWebコンソールに表示されている物を入力するIPを固定していないと、VPSをシャットダウンして起動した場合に変わる可能性があるので注意することユーザ名は初期ユーザならGoogleアカウントの@以降を除いた部分を利用するパスワードはこの後行う認証キーの作成時にパスワードを設定するかしないかで、入力の必要性が決まる認証キーを押して秘密鍵を作る作成ボタンを押すだけの簡単な作業だ。パスフレーズは前述の通り、入れたければ入れれば良いし、テスト環境だからいらないというのならそれでもいいあとは公開鍵ボタンを押して、その内容をGCEのインスタンス編集画面で貼り付けるだけだ貼り付けるときの注意点は公開鍵の末尾のユーザ名を、VPS上のアカウント名に直すことだデフォルトではWindowsアカウントが入っているので、相違があればログインできない存在しないユーザ名では門前払いを食らうことになるだろう
作成ボタンを押し数十秒待つとインスタンスが作成されるそして問答無用で起動する外部IPに記述されているのが、外からアクセスするのに必要なアドレスだ内部IPはGCE内に構築したVPS同士で通信する場合に利用することがあるまた正確な話をすると、VPS自体に外部IPは割り当てられておらず、内部IPからゲートウエイを経由する時点で変換が行われるなのでVPSのインタフェイスを確認するとプライベートIPしか持っていないことが分かる割り当てられるのはIPv4のみであるIPv6を利用したければプロジェクトにロードバランサを構築して変換をかける必要があるがコストがかかることには留意すること
新規にVPSを作ることになるが、下図はその設定例だ日本在住ならリージョンは東京をおすすめする名前は決めると後から変更できないコマンドで操作するときに、この名前を使うときがあるので変な名前をつけるのはお勧めできないマシンタイプは試しに作るなら最小構成で十分であり、これなら一月ワンコインで済むOS選択時にストレージの容量を設定できるが、ここは初期段階で欲張らない方が良い最大容量を増やすことは簡単だが、減らすことは出来ない正確に言うと頑張れば減らせるが、いくつかの面倒くさい作業が待っているこれは別に解説する管理ボタンを押すと、追加設定が出来るそこで可用性ポリシーのプリエンプティブをオンにすると、ランニングコストをかなり下げることが出来る高性能な構成ほど効果が出やすいただし24時間程度でシャットダウンされる
Webコンソール上からssh接続するなら、SSHボタンを押すだけで終わりである
GCEのコンソールまでたどり着く インスタンスの作成 インスタンス始動！ ssh接続 RLoginの設定 ここまで出来たらsudoだけ覚えて帰って
先ほど書いたとおり一年間は無料で使える 正確には一年間限定、$300クレジットがもらえる この金額の範囲に収まるなら、無料でVPSを立てたい放題出来る AWSは最小構成のインスタンス一つだが、GCEは$300以内であれば高スペックのインスタンスを複数作ることも可能だ さらに、一つのアカウントに対して$300なので、アカウントを複数持っているならその分だけクレジットが利用できる 複アカに禁止規約は存在しない ちなみに利用規約を読むと、無料トライアルでは暗号通貨のマイニングは禁止と書かれており、それ以外の禁止事項がない $300あれば、 東京リージョン 共有 vCPUx1 メモリ 1.6GB HDD 100GB 程度の構成で一年間使うとして$259.8だったので、余裕でおつりが来る計算だ いや、料金を支払っていないから、おつりは来ない さらにサーバをプリエンプティブ構成にして、コストを1/3に押さえるという方法もあるが、これはQiitaに書いた記事を読んでほしい
GCPとGCE GCEのトライアル
GoogleComputeEngine (GCE)とはGCPのサービスの一つで、一般にいうところのVirtualPrivateServer(VPS)を提供してくれる Googleが提供しているサービスであるにもかかわらず、その知名度の低さは致命的だ 同様のサービスとしてAmazonのAWS、MicrosoftのAzureがある 知名度はこの二つの方が圧倒的に上である なるほどこうやって考えるとソートを考慮して、Aから始まる名前をつければ良かったのではないだろうか？ その他VPSは、巨大企業のものを使わなくても有象無象にたくさん存在する しかしLinux系OSで気軽に始めるなら、GCEかAWSをお勧めする なぜならこの二つは一年間、タダで使えるからだ ちなみにAzureは30日となっている
GoogleCloudPlatform(GCP) GoogleComputeEngine (GCE)
Google Compute Engine (GCE) 入門
Googleの提供するVPSの使い方の解説
GoogleCloudPlatform(GCP)とはGoogleが提供する様々なクラウドサービスの集まりである 前提知識なくサイトに飛ぶと、あまりのサービスの多さに結局なんなのかわからないという悲しい結果を招くことになる GCPはGoogleの提供するサービスのあらゆるAPIが有料無料で集まっている広大海だ やりたいことを明確化せずに赴いても、溺れることは必然である
rootにパスワードをつける root権限を得る SELinuxの無効化 swap領域の作成 入れておいた方がいいもののインストール タイムゾーンの設定
ファイルリスト表示コマンドls最初は何もファイルを作っていないので、リストには何も表示されない以下、隠しファイルを表示ls -a予め、いくつかの設定ファイルが隠しファイル(頭にドットに付いたファイル)になってる詳細表示ls -lファイルサイズや更新日時を表示するオプションの組み合わせも可能ls -la
以下のコマンドを実行するpwdログイン直後はカレントディレクトリがホームディレクトリになってる
. カレントディレクトリを表す.. 親ディレクトリを表すls .ls ..で違いが確認できる../ファイル名というような指定をすると、親ディレクトリのファイルを操作できる
VPS(Google系)やLinux(CentOSやUbuntu)などのサーバ構築系情報
分割バーfunction Sample005() { const frame = new JWF.FrameWindow() frame.setTitle('Sample005 分割ウインドウ') //タイトル設定 const splitter = new JWF.Splitter() //分割バーの作成 frame.addChild(splitter, 'client') //分割バーをフレームウインドウに乗せる const tree = new JWF.TreeView() //ツリービューの作成 const list = new JWF.ListView() //リストビューの作成 splitter.addChild(0, tree, 'client') //splitterの分割領域0にtreeを追加 splitter.addChild(1, list, 'client') //splitterの分割領域1にlistを追加 //分割バーの分割サイズと方向設定(WestEast、左右) //weは左が領域0、右が領域1 //nsにすると上下分割も可能 splitter.setSplitterPos(200, 'we') //表示領域が300を切ると、動的なオーバーレイ表示にする splitter.setOverlay(true, 300) //treeにアイテムを追加 tree.getRootItem().setItemText('最上位アイテム') for (let j = 0; j < 5; j++) { let item = tree.addItem("アイテム" + j, true) for (let i = 0; i < 5; i++) item.addItem("サブアイテム" + j + "-" + i, false) } //アイテムが選択された場合のイベント tree.addEventListener('itemSelect', function (e) { c
ツリービューfunction Sample004() { //ツリービューの作成 let treeView = new JWF.TreeView({ frame: true }) treeView.setTitle('Sample04 ツリービュー') //タイトルの設定 //サイズ設定 treeView.setSize(300, 300) //ルートアイテムに対して名前の設定 treeView.getRootItem().setItemText('ルートアイテム') //アイテムを作成 let item item = treeView.addItem('アイテム1') item.addItem('アイテム1-1') item.addItem('アイテム1-2') item = treeView.addItem('アイテム2') item.addItem('アイテム2-1') item.addItem('アイテム2-2') //アイテムが選択された場合のイベント treeView.addEventListener('itemSelect', function (e) { const name = e.item.getItemText() //リストビューからデータを取り出す new JWF.MessageBox('メッセージ', name + "が選択された") //メッセージボックスの表示 }) }
不正終了すると、viのスワップファイルが残留し起動時にその旨のメッセージが毎回出るようになる メッセージを消すには、ファイルを削除しなければならない rm スワップファイル名スワップファイル名は 「.不正終了したファイル名.swp」になっている ファイルリストを確認するときは 「ls -la」、viで確認するときは「vi -r」とする 頭にドットのついているファイルは隠しファイル扱いになっているので、lsコマンドには必ずaオプションを利用すること
モードに関して 必要頻度の高いコマンド バックグラウンドに関して 不正終了
間違えてCTRL+Zを押してしまうと、アプリケーションがバックグラウンドに回ってしまう 正常終了していない状態になってしまうので以下のコマンドで対処することfg以上のコマンドで、viが復帰するので正常に終了させる動作しているプロセスを確認するには、jobsコマンドを利用する
カレントディレクトリ 現在いる場所ホームディレクトリ 各ユーザに割り当てられた専用の場所ルートディレクトリ ファイルシステムのもっとも上位の場所親ディレクトリ 現在よりも一つ上の場所
CUIでファイルやディレクトリを扱う上で最低限必要な知識を確認するディレクトリの種類 ディレクトリの確認 ファイルの確認 絶対パスと相対パス 相対指定
viはモードという概念を持っているテキストを入力するためのモードとコマンドを入力するためのモードである モードを切り替える方法は、コマンドの項目を参照されたし
・ファイルの末尾を表示 tail ファイル名・ディレクトリの作成 mkdir ディレクトリ名・ディレクトリの削除 rmdir ディレクトリ名 rm -r ディレクトリ名・ファイル内容の表示 cat ファイル名・ファイル内容を終端部分のみ表示 tail ファイル名・ファイルリストの表示 ls・ファイルリストの詳細表示 ls -l・ファイルリストの隠しファイルの表示 ls -a・カレントディレクトリの表示 pwd・カレントディレクトリの移動 cd ディレクトリ名・テキストファイルの編集(細かい使い方はviエディタの使い方を参照) vi ファイル名・ファイルの削除(削除するかどうか聞いてきた場合はyを入力すること) rm ファイル名・ファイル名の変更/移動 mv 移動元 移動先・ファイルのコピー cp コピー元 コピー先・管理者権限の取得 su -・属性の変更 chmod 属性 ファイル名 属性 a:全て u:所有者 g:グループ o:その他 +:追加 -:削除 r:読み込み w:書き込み x:実行 例 chmod o+w file.txt・所有者の変更 chown ユーザID:グループID ファイル名 -R 下の階層すべて 例 chown -R x13g000:x13g000 ファイル/ディレクトリ名・サービスの起動/停止等 systemctl アクション サービス名 アクション start(開始) stop(停止) reload(更新) restart(再起動) 例 systemctl start network・サービスの自動起動設定 systemctl アクション サービス名 設定 enable/disable 例 systemctl enable network ・パッケージのインストール yum -y install パッケージ名・IPアドレスの表示 ip a・再起動reboot・シャットダウンpoweroffhalt
リストビューfunction Sample003() { const listView = new JWF.ListView({ frame: true }) //リストビューをフレーム付きで作成 listView.setTitle('Sample03 リストビュー') //タイトルの設定 listView.addHeader(['番号', '名前', '攻撃力']) //ヘッダの作成 listView.addItem([1, '竹槍', 5]) //アイテムの設定 listView.addItem([2, '棍棒', 10]) listView.addItem([3, '銅の剣', 10]) listView.setPos(30, 30) //位置指定 listView.addEventListener('itemClick', (e) => { //アイテムクリック処理 const name = listView.getItemText(e.itemIndex, 1) //リストビューからデータを取り出す new JWF.MessageBox('メッセージ', name + "が選択された") //メッセージボックスの表示 }) }
位置とサイズを設定し、イベントを受け取るfunction Sample002() { const win = new JWF.FrameWindow() //フレームウインドウの作成 win.setTitle('Sample02 位置サイズ指定') //タイトルの設定 win.setSize(100, 100) //サイズの変更 win.setPos(10, 10) //位置指定 const client = win.getClient() //クライアントノードの取得 win.addEventListener('active', (e) => { client.innerText = e.active ? 'アクティブになった' : '非アクティブになった' }) }
初期設定ではrootしかディレクトリに書き込めないため、ユーザのアクセス権を設定する必要があるsetfacl -R -m u:ユーザ名:rwx /var/www/htmlデフォルトではaclパッケージが入っていないようなのでコマンドが無いと言われた場合は、以下のコマンドを実行apt -y install acl
/etc/cron.d/certbot_updateSHELL=/bin/bash PATH=/sbin:/bin:/usr/sbin:/usr/bin MAILTO=root 0 0 1 * * root certbot renew && systemctl reload nginxcrondの更新systemctl reload cron
server設定でドメイン名とコンテンツを関連付けるファイルは一つにまとめてもかまわないし、server設定ごとに複数に分けることもできる今回は複数に分けて設定していく/etc/nginx/sites-enabled/hogehogeserver { listen 443 ssl http2; ssl_certificate /etc/letsencrypt/live/hogehoge/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/hogehoge/privkey.pem; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; server_name hogehoge; root /var/www/html/; } /etc/nginx/sites-enabled/www.hogehogeserver { listen 443 ssl http2; ssl_certificate /etc/letsencrypt/live/hogehoge/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/hogehoge/privkey.pem; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; server_name www.hogehoge; root /var/www/www/; } /etc/nginx/sites-enabled/www2.hogehogeserver { listen 443 ssl http2; ssl_certificate /etc/letsencrypt/live/hogehoge/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/hogehoge/privkey.pem; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; server_name www2.hogehoge; root /var/www/www2/; }
実動作 https://javascript-windowframework.github.io/jwf_sample01/dist/ソースhttps://github.com/JavaScript-WindowFramework/jwf_sample01/Sample001 Sample002 Sample003 Sample004 Sample005
cd /var/libsudo git clone https://github.com/disco-v8/DirectEdit.gitsudo chmod u+x /var/lib/DirectEdit/*.phpsudo chmod 600 /var/lib/DirectEdit/txtedit.conf
certbotphpphp-mbstringgit
ウインドウを表示するだけfunction Sample001() { const win = new JWF.FrameWindow() //フレームウインドウの作成 win.setTitle('Sample01 ウインドウを表示') //タイトルの設定 win.setPos() //位置を中心に設定 }
Let's Encryptによるhttps環境の構築2(自動設定)
こちらはMyDNSの公式プログラムを利用して、ワイルドカードの証明書を自動取得する方法です最小限の労力でhttps化するのなら、こちらが近道です前提条件として必要なもの MyDNSの公式プログラムのインストール MyDNSのアカウント設定 証明書の発行
[index.ts]import * as JWF from 'javascript-window-framework' function Main() { const listView = new JWF.ListView({frame:true}) listView.addHeader(['番号','名前','攻撃力']) listView.addItem([1,'竹槍',5]) listView.addItem([2,'棍棒', 10]) listView.addItem([3,'銅の剣', 10]) listView.setPos() listView.addEventListener('itemClick',(e)=>{ const name = listView.getItemText(e.itemIndex,1) const msgBox = new JWF.MessageBox('メッセージ',name+"が選択された") }) } //ページ読み込み時に実行する処理を設定 addEventListener("DOMContentLoaded", Main)
・package.jsonの生成npm -y init・JWFモジュールのインストールnpm i javascript-window-framework・WebPackのインストールnpm -D i webpack webpack-cli typescript ts-loader・TypeScriptの設定ファイルの作成(.tsを使わなければ不要)tsc --init・WebPackの設定ファイルの作成 [webpack.config.js]const path = require('path'); module.exports = { mode: 'production', entry: './index.ts', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [{ // 拡張子 .ts の場合 test: /\.ts$/, // TypeScript をコンパイルする use: "ts-loader" }] } }; ・テストコードの作成 [index.ts]import * as JWF from 'javascript-window-framework' function Main() { const win = new JWF.FrameWindow() //フレームウインドウの作成 win.setTitle('サンプルウインドウ') //タイトルの設定 win.setPos() //位置を中心に設定 const client = win.getClient() //クライアントノードの取得 client.innerText = 'テキスト表示の\n実験' } //ページ読み込み時に実行する処理を設定 addEventListener("DOMContentLoaded", Main)・WebPackでビルドwebpack・初期HTMLの作成 [dist/index.h
Node.jsが入っていることが前提ですビルドまでの手順 プログラムを書き換えてみる
・その場で無効systemctl disable apparmor・起動時に無効 /etc/default/grubの設定を書き換える ちんたらファイル編集するのは面倒なので、コマンド一発で済ませるsed -i '1,/GRUB_CMDLINE_LINUX=""/s/""/"apparmor=0"/' /etc/default/grub
https://github.com/JavaScript-WindowFramework/javascript-window-framework
npm i javascript-window-framework
JWF(JavaScript-Window-Framework)
JavaScript(TypeScript)で仮想ウインドウシステムを実現します単純なフレームウインドウの他にListViewやTreeViewの機能も実装済みですこのサイトもこれで開発していますnpmで公開中ですnpmによるインストール ソースコード
src/public/main/index.ts///<reference path="../../../dist/public/js/jsw.d.ts"/> //ページ読み込み時に実行する処理を設定 addEventListener("DOMContentLoaded", Main) async function Main(){ const adapter = new JSW.Adapter() const result = await adapter.exec('TestModule.add',10,20) console.log(result) } フロントエンドで動作するJavaScriptの元になるTypeScriptコードです。通信用のアダプタクラスがdist/public/js/jsw.d.tsに含まれているため、最初に定義しておく必要があります。
src/app/modules/TestModule.tsimport * as amf from 'active-module-framework' /** *テストモジュール * * @export * @class TestModule * @extends {amf.Module} */ export class TestModule extends amf.Module { async JS_add(a:number,b:number) { return a+b } } 動作確認用のサンプルモジュールです。必要なければ削除してください。クライアントからのパラメータの受け取りとデータの返却を確認できます。追加で作ったモジュールは全てこのディレクトリを使います。
src/template/index.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" /> [[CSS]] [[SCRIPTS]] </head> <body> </body> </html>トップページへアクセスしたときに利用されるHTMLデータのテンプレートです。必要に応じて書き換えてください。[[CSS]]と[[SCRIPT]]は、dist/public/cssdist/public/jsのファイルを読み出す記述が挿入されます。また、自動的に挿入されたファイルはHTTP2のlinkヘッダが生成され、トップページ転送と同時にクライアントへ配信されます。ただしこの機能の利用にはhttps化が必要です。
src/app/index.jsimport * as amf from 'active-module-framework'new amf.Manager({ remotePath: '/', //一般コンテンツのリモートパス execPath: '/', //コマンド実行用リモートパス rootPath: 'dist/public', //一般コンテンツのローカルパス indexPath: 'src/template/index.html', //index.thmlテンプレート cssPath: ['css'], //自動ロード用CSSパス jsPath: ['js'], //一般コンテンツのローカルパス localDBPath: 'dist/db/app.db', //ローカルDBパス modulePath: 'dist/app/modules', //モジュール配置パス jsPriority: ['jsw.js'], //優先JSファイル設定 debug: true, //デバッグ用メッセージ出力 listen: 8080 //受付ポート/UNIXドメインソケット //listen:'dist/sock/app.sock'}) 初期ディレクトリ構成などを変更する場合は、このファイルを設定します。基本的にはこのまま使えますが、nginxと連携させる場合は、UNIXドメインソケットを使うようにlistenを変更してください。
- / - dist (出力ファイルディレクトリ) - app (バックエンド用コンパイル済みディレクトリ) - modules (コンパイル済みモジュール) - db (ローカルデータベース用ディレクトリ) - public (フロントエンド用ファイルディレクトリ) - sock (UNIXドメインソケット用ディレクトリ) - src (ソースコード類) - app (バックエンド用プログラムソース) - index.ts (バックエンド初期パラメータ設定用) - modules (モジュールフォルダ) - public (フロントエンド用ディレクトリ) - main (フロントエンド用メインソース)
オブジェクト指向にクラスはいらない オブジェクト指向の重要な要素 機能の明確な分割とそこで発生する問題 意思の力、それがオブジェクト指向だ
プラグインのインストール フォルダを開く デバッグ設定
以下のファイルを追加する/etc/php.d/90-xdebug_custom.inixdebug.remote_enable = 1xdebug.remote_autostart = 1サービスの再起動systemctl restart php-fpm
ディレクトリ構成 初期設定ファイル トップページテンプレート バックエンド:テスト用サンプルモジュール フロントエンド:テスト用サンプル
オブジェクト指向というと必ずと言って良いほど、クラスの解説が入ってくる記事が多い。極端な話をすれば、オブジェクト指向に沿ったプログラミングをするのにクラスは必要ない。アセンブラでプログラムを書いたとしても、オブジェクト指向は実現できるのだ。ただ、クラスが実装されている言語は、オブジェクト指向を目指す上で便利な機能があると言うだけに過ぎない。
基本的にNode.jsとTypeScriptの機能だけで完結しているので、フロントエンドの開発にはWebPackのようなモジュールバンドラを必要としません・インストールnpm install active-module-framework・初期ファイルの設置 以下のコマンドで必要なファイルがコピーされますnode_modules/.bin/amf-init・TypeScriptのビルド フロントエンドとバックエンドの初期ファイルを動作可能状態にするために必要ですtsc -b・Watch状態でのビルド ファイルの更新と同時にビルドする場合は以下のコマンドを使用してください フロントエンド、バックエンドともに監視対象となりますtsc -b -w・ 起動(起点ファイル) 以下のコマンドで動作しますnode dist/app/index.js・pm2による起動 pm2用の設定ファイルが付属しているので、以下のコマンドで起動可能ですpm2 start・ブラウザによる動作確認 デフォルトでは8080番を受付ポートにしていますhttp://localhost:8080/
動作させるまで
JWFのウインドウ生成機能を使ってUIを作成しています ///<reference path="../../../dist/public/js/jwf.d.ts"/> //ページ読み込み時に実行する処理を設定 addEventListener("DOMContentLoaded", Main) function Main() { //通信アダプタの作成 const adapter = new JWF.Adapter() //ウインドウを作成 const window = new JWF.FrameWindow() window.setTitle('サンプルテンプレート') window.setSize(450, 100) window.setPos() //ウインドウクライアントノードの取得とHTMLデータの設定 const client = window.getClient() client.style.padding = '1em' client.innerHTML = `<input> + <input> <button>=</button> <span>？</span>` //各ノードの取得 const nodes = client.querySelectorAll('input,button,span') //ボタンイベントの処理 nodes[2].addEventListener('click', async () => { //Inputタグから内容を取り出す const a = parseInt((nodes[0] as HTMLInputElement).value) const b = parseInt((nodes[1] as HTMLInputElement).value) //サーバにデータを送信し、受信完了まで待つ const result = await adapter.exec('TestModule.add', a, b) //結果を書き込む nodes[3].t
表示しているのはJWFで作成したブラウザ内に生成している仮想ウインドウです内容は、以下のような動きをするサンプルです1 フロントエンドでブラウザ内に仮想ウインドウを作成2 ユーザが入力した値をバックエンド側に送る3 バックエンド側で加算処理し、それをフロントエンド側に戻す 4 戻ってきた値を表示TestModule.ts(バックエンド側) index.ts(フロントエンド側)
動作イメージ
「ブログリーダー」を活用して、空雲さんをフォローしませんか？
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。
