AmazonLinuxをVMWare Fusionで起動する
概要
なんかVagrantでboxどっかで見つけたことがあるので じゃあ、あるはずということで探した
↓
たぶんここ
やり方
1. seed.iosを作成しないといけない
meta-data
mkdir seed cd seed cat << EOF > meta-data local-hostname: amazonlinuxvm EOF
user-data
cat << EOF > user-data
#cloud-config
# vim:syntax=yaml
users:
# A user by the name ec2-user is created in the image by default.
- default
chpasswd:
list: |
ec2-user:ec2-pass
EOF
seed.iosを作成
cd ../ hdiutil makehybrid -o seed.iso -hfs -joliet -iso -default-volume-name cidata seed/
↓
Creating hybrid image... ............................................................................... % ls -la total 1800 drwxr-xr-x 4 shigeharu staff 128 11 6 07:17 . drwxr-xr-x 21 shigeharu staff 672 11 6 07:05 .. drwxr-xr-x 4 shigeharu staff 128 11 6 07:15 seed -rw-r--r-- 1 shigeharu staff 921600 11 6 07:17 seed.iso %
2. VMイメージをダウンロード
Index of /os-images/2.0.20211005.0/vmware
3. VMWare Fusionを起動し、VMイメージをインポート
↓
↓
↓
起動した感じ
sshは行ける？
% ssh ec2-user@192.168.11.20 ec2-user@192.168.xx.yy: Permission denied (publickey,なんかの文字列).
だめなので、めんどいのでPWログインを許可する ・/etc/ssh/sshd_config
PasswordAuthentication yes
再チャレンジ
% ssh ec2-user@192.168.11.20
ec2-user@192.168.11.20's password:
Last login: Fri Nov 5 22:43:04 2021 from 192.168.11.2
__| __|_ )
_| ( / Amazon Linux 2 AMI
___|\___|___|
https://aws.amazon.com/amazon-linux-2/
No packages needed for security; 10 packages available
Run "sudo yum update" to apply all updates.
$
できた(^ ^)
参考
VMwarePlayerでAmazon Linux 2を起動 - Qiita
VirtualBoxにAmazon Linux 2をインストールする方法（環境構築方法） | PostgresWeb - ポスグレウェブ
共通のSCSSファイルを外部ファイルで読み込みたい
概要
vueの場合はvueファイルでtemplate、script、css（scssとかも含む）を記載することができる。 さらにcssはスコープでファイル内のみとそれ以外の制御ができる
やりたいこと
参考
Vue CLI 3でグローバルなSCSSを読み込ませる - Qiita
Vue-cli3 でグローバルなCSSを読み込む - FULL STUCK DIARY
ソースコード準備
src/assets/scss/_prepends.scss
/** * 全体に適用するscss */ @import "./common"; @import "./font";
src/assets/scss/common.scss
* { margin: 0px; padding: 0px; }
src/assets/scss/font.scss
* { font-size: 14px; }
方法は２つあるとのこと
vue.config.jsにcssローダーを付与
module.exports = { devServer: { port: 5000, disableHostCheck: true, }, css: { loaderOptions: { sass: { prependData: `@import "./src/assets/scss/_prepends.scss";`, }, }, }, };
※色々なサイトでは「prependData」ではなく、「data」になっていて「data」ではエラーになる・・・
main.js（main.ts）で読み込み
import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; require("./assets/scss/_prepends.scss"); // ⇦ 追加 createApp(App).use(store).use(router).mount("#app");
※まあ、こっちの方が楽といえば楽
Vueのインストール
Vue
お試し
インストール
% yarn global add @vue/cl % vue -V @vue/cli 4.5.15 %
プロジェクト作成
vue create .
※カレントディレクトリ直下に作成する ※Manualで色々設定してみた(v2)
ディレクトリ構成
% tree -L 3 -I node_modules . ├── README.md ├── babel.config.js ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── HelloWorld.vue │ ├── main.ts │ ├── router │ │ └── index.ts │ ├── shims-vue.d.ts │ ├── store │ │ └── index.ts │ └── views │ ├── About.vue │ └── Home.vue ├── tests │ └── unit │ └── example.spec.ts ├── tsconfig.json └── yarn.lock
vue.config.js
module.exports = {
devServer: {
port: 5000,
disableHostCheck: true,
},
};
起動
yarn serve
※初回は多分ビルドが走る
↓
AWS Workspaceを試す
AWS Workspaces
メール確認
メールを確認してリンクをクリックする
初回のアクセスパスワードを更新
クライアントをダウンロード
クライアントアプリをインストール
↓
クライアントで起動
メールの登録キーを設定
ユーザーとパスワードを設定
アクセス
所感
今回はちょっとお試し、
データをどのように管理できるかとか
Workspaceからインターネットへの接続制限などをどのようにやるかでセキュリティを保てるかを試してみたい
docker-composeでnginx+php(cakeph4)+MySQLの環境を構築する
構成（雑）
手順
docker-compose.yml
version: "3" services: # web web: # コンテナ名 container_name: web # image image: nginx:alpine # 他のコンテナ起動後に起動するように制御 depends_on: - php - db # ポート開放 ports: - "80:80" # ボリューム volumes: - "./nginx/conf.d:/etc/nginx/conf.d" - "./app:/var/www/html" # app php: # コンテナ名 container_name: php # ビルド build: ./dockers/php # コンテナに入るようにできる tty: true # 他のコンテナが起動後に動くように制御 depends_on: - db # ボリューム volumes: - "./app:/var/www/html" # ポート ports: - 9000:9000 - 4321:4321 # 環境変数 environment: TZ: "Asia/Tokyo" # DB db: # コンテナ名 container_name: mysql # イメージ image: mysql # tty: true # 再起動 restart: always # 環境変数 environment: MYSQL_ROOT_USER: "root" MYSQL_ROOT_PASSWORD: "password" MYSQL_DATABASE: sample MYSQL_USER: hoge MYSQL_PASSWORD: foofoo TZ: "Asia/Tokyo" # ボリューム volumes: - mysql_data:/var/lib/mysql # ポート ports: - 3306:3306 # 名前付きボリュームをdockerホストの管理下で作成 volumes: mysql_data: {}
nginx/conf.d/vhost1.conf
server {
listen 80;
listen [::]:80;
server_name example.com;
root /var/www/html/webroot;
index index.php;
#access_log /var/www/example.com/log/access.log;
#error_log /var/www/example.com/log/error.log;
location / {
try_files $uri $uri/ /index.php?$args;
}
location ~ \.php$ {
try_files $uri =404;
include fastcgi_params;
fastcgi_pass php:9000;
fastcgi_index index.php;
fastcgi_intercept_errors on;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
}
}
dockers/php/Dockerfile
# PHPイメージ
FROM php:7.4.23-fpm-buster
# 関連パッケージをインストール
RUN apt-get update && \
apt-get install -y vim && \
apt-get install -y unzip && \
apt-get install -y libicu-dev && \
docker-php-ext-install intl && \
docker-php-ext-install pdo_mysql
# composerをインストール
COPY --from=composer /usr/bin/composer /usr/bin/composer
※phpイメージ用のDockerfileでphpのパッケージインストーラーであるcomposerをインストールしておく
↓
参考
Docker の Nginx + MySQL 環境で CakePHP 4 を動かす / Twin Turbo Computing
CakePHP4 の開発環境をDockerを使って構築する - Qiita
github
docker-composeでnginxを使用してリバースプロキシを行う
dockerでnginxを利用してアプリサーバをリバースプロキシしたい
こんなやつ
設定
docker-compose.yml
version: "3" services: # nginx nginx: # コンテナ名 container_name: nginx # image image: nginx:alpine # スタブサーバー起動後に動く depends_on: - mocky - staticsite # コンテナに入るようにできる tty: true # ポート ports: - "80:80" # ボリューム（マウント） volumes: - ./dockers/nginx/conf.d:/etc/nginx/conf.d # スタブサーバ用 mocky: # コンテナ名 container_name: mocky # Dockerfile場所 build: ./dockers/mocky # コンテナに入るようにできる tty: true # ボリューム volumes: - "./dockers/mocky/app:/usr/src/app" # ポート ports: - "4321:4321" # 作業ディレクトリ working_dir: /usr/src/app # 実行コマンド entrypoint: npm start # 静的サーバ用 staticsite: # コンテナ名 container_name: staticsite # image image: panubo/staticsite # コンテナに入るようにできる tty: true # ポート ports: - "8000:80" # ボリューム volumes: - "./dockers/staticsite/html:/var/www/html"
docker-compose.yml自体はほとんど変化なし ２つのホストでそれぞれ異なるサーバへプロキシを行う検証として１つコンテナは追加しました。
dockers/nginx/conf.d/vhost1.conf
# スタブサーバ接続用設定
upstream backend1 {
server host.docker.internal:4321;
}
server {
listen 80;
server_name sample.mocky.com;
root /var/www/html;
location / {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://backend1/;
}
}
dockers/nginx/conf.d/vhost2.conf
# スタブサーバ接続用設定
upstream backend2 {
server host.docker.internal:8000;
}
server {
listen 80;
server_name sample.staticsite.com;
root /var/www/html;
location / {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://backend2/;
}
}
基本的なプロキシ設定自体は同じ それぞれ異なるポートを利用すること
結果
sample.mocky.com/
% curl http://sample.mocky.com/api/v01/users | jq
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 42 0 42 0 0 8400 0 --:--:-- --:--:-- --:--:-- 8400
{
"users": [
{
"name": "hoge"
},
{
"name": "foo"
}
]
}
%
sample.staticsite.com
% curl http://sample.staticsite.com
<html>
<head>
<title>test</title>
</head>
<body>
<p>
test
</p>
</body>
</html>
%
コンテナから他のコンテナへのアクセス
コンテナ名を指定したり、ネットワークを作成して割り当てる方法などもあるようですが、
今回はhost.docker.internalで対応
参考
Docker上のリバースプロキシで静的コンテンツを複数コンテナ間と共有 | Tech Memo
Dockerコンテナ内からホストへ`localhost` でアクセスしてみる | iret.media
github
https://github.com/mshige1979/mocky_docker_sample/tree/nginx
docker-composeで簡易的なスタブサーバを作成
普段、簡易サーバを用意する場合って
毎回、nodejsとかphpとかでデモを一から用意するんですよね… まあ、それでも良いのですが ちょっとだけ楽したいってことがあります。
よく使うの
使い方の参考リンク
Node.js の mocky を使用し スタブREST API を作成してみる、その１ - Qiita
mocky を使ってちょっと賢いスタブAPIサーバを作る - Qiita
dockerでやりたい
最終的にはnginxとか使いたいけどとりあえず、docker~composeでの試作版を用意する
docker版
ディレクトリ構成
.
├── LICENSE
├── README.md
├── docker-compose.yml
└── dockers
└── mocky
├── Dockerfile
├── README.md
└── app
├── api
│ ├── api.js
│ └── user.js
├── index.js
├── package-lock.json
└── package.json
dockers/mocky/app/package.json
{
"name": "mocky",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module",
"scripts": {
"start": "nodemon --exec node --experimental-modules index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"mocky": "^0.1.11",
"nodemon": "^2.0.7"
},
"dependencies": {
"canvas": "^2.6.1",
"html-pdf": "^2.2.0"
}
}
dockers/mocky/app/index.js
import mocky from "mocky"; import Api from "./api/api.js"; mocky.createServer([Api.getUser, Api.getUsers]).listen(4321);
docker-compose.yml
version: "3" services: # スタブサーバ用 mocky: # コンテナ名 container_name: mocky # Dockerfile場所 build: ./dockers/mocky # コンテナに入るようにできる tty: true # ボリューム volumes: - "./dockers/mocky/app:/usr/src/app" # ポート ports: - "4321:4321" # 作業ディレクトリ working_dir: /usr/src/app # 実行コマンド entrypoint: npm start
dockers/mocky/Dockerfile
# ベースイメージ FROM node:12 # 作業ディレクトリ WORKDIR /usr/src # package.jsonをコピー # ホスト側はDockerfileの場所からの相対パス COPY ./app/package*.json ./ # パッケージインストール RUN npm install --no-optional && npm cache clean --force ENV PATH /usr/src/node_modules/.bin:$PATH # 作業ディレクトリ WORKDIR /usr/src/app # ホスト側はDockerfileの場所からの相対パス COPY ./app/. ./ # 実行 CMD ["npm", "start"]
起動
% docker-compose up -d Creating network "mocky_default" with the default driver Creating mocky ... done %
↓
% curl http://localhost:4321/api/v01/users | jq
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 42 0 42 0 0 14000 0 --:--:-- --:--:-- --:--:-- 14000
{
"users": [
{
"name": "hoge"
},
{
"name": "foo"
}
]
}
%
参考情報
Dockerでmockyを使ったスタブサーバを立ち上げる - Qiita
DockerでNode.jsアプリをイイ感じに保つ4つの方法 #docker - クリエーションライン株式会社
