会社のサーバ構成の変更を考える
現在の構成
前は色々と使っていたが今は下記で終わっている
さくらVPS
会社設立前からさくらVPSにホスティングをしている
今はほぼWebページしか使ってないが、いろんなWordPress建てたり、GitLabやRedmine、メールサーバを建てていた時期がある
一応仕事によっては固定IP欲しいので、プロキシサーバはいつでも立ち上げられるようにしている
お名前.com、お名前メール
ドメインはお名前.comでとっている。DNSもお名前.comからさくらVPSへフォワードしている
メールはお名前メールを今は利用している。メールサーバを自社で持ってもいいが、お名前メールすごく安いし楽なので・・
ソース管理
内部のGItLabは今は使ってない。GithubやらGitlab.com、AzureReposなどのホスティングサービスが便利だ
ただ、ゲームの案件などでは、外部のホスティングサービスを禁止されることがある
といっても、結局はAWSにGitLabやらGHEをホスティングするので、クラウドにデータを置くのだが、何故かはわからぬ
たしかにGithubから情報流出があったり、Githubサーバが落ちたりするリスクはあるが
そんなの自前ホスティングするほうが危険やろwwwwって思うんだが、そういう風潮があるので
もし内部でGitサーバを建てる必要が出たら建てようとおもう
IBS,WBS
今はRedmine建ててないなあ・・・そのうち建てるか・・
わたしはTrelloやGithubのツールで全部やってるので、今のところ必要性感じてないが
Redmineあると複雑な案件が管理できるので、またインストールしたいなあ
まあ、クラウドホスティングサービス使ってもいいんだけど
チャットBOT
昔はホスティングしてた時もあるが今は使ってない
例えばSlackにAWSの使用状況とか通知してくれると便利なので、またBOT導入したいところ
問題点
さくらVPSは昔から契約しているため、OS等が古い
まずVPSバージョンがV3だ(最新はV5)このため色々制限がある
また、OSがCentOS6.6ととても古い
今の時代は私はあまりCentOSでデプロイする仕事少なくなったし、Dockerで好きなOSでテスト出来るゆえに
Ubuntuなり楽なOSに変えようかと思っている
そして、会社のホームページをリニューアルしようと思うが、現状静的コンテンツのみなため、S3でええやん・・・
そうすると現状はVPS不要論も出てきた。。
また、チャットBOTも現状だとAWS Lambda等で作る事が好ましいと思われる
もちろん年1万ちょっとなので、別にさくらVPSを解約する必要もないのだけど
大阪リージョンに作っているため、レスポンスがより早くなるよう東京リージョンに変えてもいいし・・
Redmineを建てるとしても常時建てている必要はなく、必要になったらインスタンスを立ち上げる、クラウドベースのほうが便利かもしれない
SlackBotで起動させればええやんやし、Reserved Instanceではなく、Spot InstanceでBIDしても面白い
まあ年間1万程度なので、常時起動させてもいいけど、どっちが美しいか?という話だ
実際に無駄にシステムこだわって作る工数をペイするには100年運用が必要だろうwww
お得なのは、さくらVPSなりAWS LightSail あるいはEC2でホスティングする事である
やる事
さくらVPSの再インストール
さくらVPSはどうせあと10か月契約残っているので契約は終了しないが
VPSを一度破棄し新しく作り直す。OSはUbuntuなり新しくしたい
会社のWebページ
会社のホームページをS3+CloudFrontに変更する。当然Route53も設定必要だし、DNSの転送も変える
試算したが月120円程度だ
リモート開発環境
AWS Cloud9を評価してみようと思う
これが使いやすければ、PC複数あってもリモート環境で開発が出来るようになる
基本的にはEC2にサーバを建てる(しかもIDEを終了したら自動的にインスタンスが終了する)のだが
SSH接続で、さくらVPSでも出来るらしいので、ついでなのでさくらVPSにホスティングしてみようと思う
SlackBot
AWSの状況の監視(アクセス異常)、AWS料金などをレポートしたり
インスタンスの起動状況、インスタンスの起動終了
その他マネージドサービスのコントロールなどを行うBOTを作りたい
AWS Amplify & ionicを勉強する
3年間はお金になる仕事をしようと思い、Amplifyに興味をもちました
具体的には、Webアプリを最速で開発、モックアプリ、PoC、R&Dを行いたい
そこそこ動くWeb、iOS、Androidのハイブリッドアプリを作るのに
サーバレスでAmplify+ionicを一つの選択肢として使ってみようと思う
もちろん、Flutter、ReactNative、Vue、Xamarinなどの有力なハイブリッドフレームワークも存在するが
Amplifyと連携しやすいのでionicを使ってみようと思う
Amplifyとは
下記の3つから成り立っている
ライブラリ
認証(cognito)、データストア(Dynamo,Aurora)、API(GraphQL,REST)、ストレージ(S3)、Pubsub、自動デプロイ、Git連携・・・
様々なマネージドサービスを一括で管理設定連携できる、いわばマネージドサービスの統合環境のようなもの
UI Component
AWSの各機能(例えばログイン関連のフォーム等)をかんたんに生成可能なUIタグが提供されている
現在は、React、ReactNative、Angular、Vue、ionic、Next.jsに対応している
CLI ToolChain
Amplifyのコマンドラインツール
これが非常に便利で、コマンド1つでAmplifyの作成やAWSのサービスの追加、デプロイ等が行うことが可能
ローカル実行
amplify mockで、ローカルでモック実行できるらしい??試してみたい
メリット、デメリット
メリット
非常に早くプロダクトを作ることが出来る
デプロイまで面倒を見てくれる
マネージドサービスのため、自動でスケーリングするし、サーバー監視も任せることが出来る
デメリット
比較的新しい機能なので、情報がない、英語が必要です
現時点では非常に出来る事が限られているため、Amplifyの機能を超えるものを作るには非常に苦労します
また、機能を拡張する際に、テーブルのマイグレーション等がしにくいという話もあり、大きな機能追加は難しいかもしれません
ionic
Typescript(JavaScript)で記述する
基本的にAngularを使うが、React、Vueも対応している
ネイティブプラグインにはPhoneGapあるいはCapacitorを使う
Web、Windows、iOS、Androidをワンソースから作れる
JavaScriptなので資産が活かせるのも大きい
また、LiveReloadが素晴らしく、ネイティブ開発時でもコードを変更するとコードがリロードされるのでリアルタイムなデバッグ開発ができる
UIパーツも、ネイティブに似ているので、普通に作るだけでネイティブっぽい見た目になります
実際のionicやAmplifyの使い方はチュートリアルなどをみてもらうとして
これで高速にアプリを作成可能になった
Windows10 IoT Coreと Windows10 IoT Enterprizeに関して
仕事で必要になったので調べた
Windows10 IoT Coreは、よくラズパイ等のIoT開発の時にインストールするOSで
OS自体の機能も少なく、アプリもUWPで動く
一方、 Windows10 IoT Enterprizeは、Windows10のフル機能が備わっているため.netのネイティブでも動く
という認識だったが、2021年にそれらを統合するらしい
なるほど、ますます便利になるなあ
ionicでモーダルウインドウを作ってみた
Generate
ionicでは各種Generateがコマンドから可能
html、css、ts、テストのテンプレートを自動で作ってくれるので利用しましょう
ionic generate - Ionic Documentation
公式の通り
page、component、directive、service の作成ができる
Modalで表示するページを作る
$ ionic generate page modal/streaming
なぜか、generateすると下記のエラーが出るようになった
Could not find an NgModule. Use the skip-import option to skip importing in NgModule.
未解決事件だが、実行する時のパスを src/appからにすると実行できるようになったが
なぜかプロジェクトのルートにファイルが作成されたので、そのファイルを src/app以下に置きなおした
更に、app-routing.modules.tsにて、モジュールのパスを管理しているので、そのファイルを開き正しく直した
Modalを呼び出す
とりあえず tab1にボタンを配置してそこから呼び出す事にした
tab1.page.ts
import { StreamingPage} from '../modal/streaming/streaming.page'; export class Tab1Page { constructor( private modalCtrl: ModalController, ) { } async presentModal() { const modal = await this.modalCtrl.create({ component: StreamingPage, }); return await modal.present(); } }
ModalControllerモジュールをimportし
presentModalインタフェースを追加した
tab1.page.htmlは下記のようにボタンを追加した
<ion-content [fullscreen]="true"> <div class="ion-padding"> <ion-button expand="block" fill="outline" (click)="presentModal()">Streaming</ion-button> </div> <app-explore-container name="Tab 1 page"></app-explore-container> </ion-content>
streamingビデオを再生させるために streaming.page.htmlに追記
<ion-content> <video width='950' height='700' src="https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_ts/master.m3u8" controls autoplay playsinline webkit-playsinline></video> </ion-content>
これで、Modalでビデオが再生できる
Closeボタン
モーダルをCloseするにはdismissを呼ぶだけだ
ボタンを追加し
streaming.pages.html
<ion-toolbar> <ion-title>streaming {{test}}</ion-title> <ion-buttons slot="end"> <ion-button (click)="close()"><ion-icon name="close"></ion-icon></ion-button> </ion-buttons>
動作をつける
streaming.pages.ts
export class StreamingPage implements OnInit { @Input() test: string; close() { this.modalCtrl.dismiss(); } ``` # CSS cssClass: 'app-streaming', だけではダメのようで modal-wrapperにもCSS適用した このあたりはまだよくわかってない・・・ globals.css
.app-streaming .modal-wrapper {
width: 100%;
height: 100%;
display: block;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
ionicをWindowsで開発し LiveReloadを行う
ionicとは?
1つのソースで、Web、Android、iOS、Windowsネイティブ等の複数のアプリを生成するハイブリッドフレームワークです
ionicの特徴としては、Typescriptで記述し、Angular(React)フレームワークを使い、ネイティブ連携にCapacitor(Cordova)を使う事
つまり、HTML、CSS、JavaScriptというWebの資産が利用出来る事にあります
Vueも現在対応中とか!
インストールもnpmで行います
Windowsとの相性
公式曰く
In general, we recommend using the built-in terminals. Many third-party terminals work well with Ionic, but may not be supported. For Windows, Command Prompt and PowerShell are supported. WSL is known to work with Ionic, but may not be supported. For macOS, the built-in Terminal app is supported. Git Bash (from git-scm.com) does not support TTY interactivity and is not supported by Ionic.
ビルトインのシェルを使ってくれ(Git bash等は対応していない)
WindowsはCommandPromptとPowerShellは対応している。WSLは動くらしいけどサポートはしないよ
まあ、iOSビルドもあるし、基本的にはMacで開発するのが当然のようだ
Windowsで開発してみた
ionicでserveすると [ERROR] ng has unexpectedly closed (exit code 127). - C++幼女 みやたけゆき
先日記事にかいたが、とあるnodeのバージョンでは、起動時にエラーが出るという問題にピンポイントにぶつかったが
基本的には問題なく動いた
が、ライブリロードが効かないのである!!
Ionic live reload not working. · Issue #495 · microsoft/vscode-cordova · GitHub
など、様々なページでWindowsだとLiveReloadが効かないという話が出ている
ionicの起動はお世辞にも速いといえない(私のMBPで30秒かかる)ので、これは何とかしたいものだ・・
WSL2を使ってみた
公式からはサポートしないと言われているWSLを使ってみる
私はWSL2にしているので、WSL1はどうなるかわからない
まず、Windowsパス(/mnt/c の下)でionicを実行したが LiveReloadがされない
このパスはWSLからみるとCloud9でマウントされたネットワークドライブなので
挙動に問題があっても仕方がない
次に、Linuxパス(例えば ~/ の下) でionicを実行すると LiveReloadが実行された!!
しかも ionicは10秒で起動する
とても快適な環境が構築された!
ionicのチュートリアルをする
ionicのチュートリアルを空き時間に勉強している
初めての Ionic アプリ: Angular - Ionic Framework 日本語ドキュメンテーション
最初なので上記の記事をみながらかいている
ただし、日本語化がされておらず、単純にコードをコピーするわけでなく
多少頭を使う(英語を読む)部分もあるので、一筋縄ではないが
これはこれで、多少頭を使って、単なるコピペにならないようになり
私も、記事を書くときに参考にしようと思う
だいたい一通りはわかったが、英語なのでよくわからないので
結局最後はコードをみて調べることにする
今は、iOS、Androidへのネイティブビルドまでいったが
iOSビルドをするために cocoapodsが必要であった
そういえばそんなもの、2光年前にインストールしたけど、環境リセットで消したんだった
まだ実機でのビルドはしていないが、だいたいわかってきた
ionicでserveすると [ERROR] ng has unexpectedly closed (exit code 127).
ionicを起動しようとしたときに下記のエラーがでた
[ERROR] ng has unexpectedly closed (exit code 127).
nodeのバージョンは下記
node v13.3
$ node
でコンソールに入り
const uuid = require('@loopback/context').uuid
と入力してエラーが出れば、node_modules\uuid が無い
諦めてnodeを別のバージョンにすれば解決