1
0

More than 1 year has passed since last update.

Nginxに静的ファイルをデプロイしてみよう

Posted at

はじめに

Docker でHTML ファイルを nginx 起動しngrock で簡単にhttps 起動できるまでを記載しています。

フォルダ構成

root/
├── Dockerfile
└── src
    └── index.html

各ファイル設定

  1. Dockerfile を用意する
FROM nginx:1.15.0

COPY ./src /usr/share/nginx/html
  1. src/index.html ファイルを用意する
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>html ファイル</title>
</head>
<body>
  Hello World.
</body>
</html>

docker で起動し、ngrock で起動する

  1. docker build する
$ docker build -t nginx-app .
  1. docker run で起動する
$ docker run -d -p 80:80 --name nginx-app nginx-app:latest
  1. ngrok でdocker run で開けたポートで起動させる
ngrok http 80

すると以下のように表示されるので https://b350-123-226-11-98.jp.ngrok.ioとなっている部分をブラウザで表示する

ngrok                                                                                                 (Ctrl+C to quit)

Hello World! https://ngrok.com/next-generation

Session Status                online
Account                       miyagi_haruki@ca-adv.co.jp (Plan: Free)
Version                       3.0.4
Region                        Japan (jp)
Latency                       -
Web Interface                 http://127.0.0.1:4040
Forwarding                    https://b350-123-226-11-98.jp.ngrok.io -> http://localhost:80

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

ブラウザでHello world.と表示されていたら完成です :hand_splayed:

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0