1、写在前面
在此记录，以备遗忘
2、核心要点
- 2.1、windows简单使用nginx
- 2.2、windows进入容器内部
- 2.3、windows更改nginx展示页面-扩展Bootstrap
- 2.4、windows自定义nginx的配置和页面路径
3、具体操作
3.1、windows简单使用nginx
# 进行镜像拉取
docker pull registry.cn-hangzhou.aliyuncs.com/acs-sample/nginx
# 进行容器启动
docker run --name nginx-8080 -p 8080:80 -d registry.cn-hangzhou.aliyuncs.com/acs-sample/nginx
# 访问网址
http://127.0.0.1:8080/
# 至此，基础docker已经完成体验
3.2、windows进入容器内部
报错：the input device is not a TTY. If you are using mintty, try prefixing the command with 'winpty'
解决方案：因为使用git进行操作才有这个问题，使用原生的cmd就不会报错了
3.3、windows更改nginx展示页面-扩展Bootstrap
1）直接进行文件更改
# 进入容器内部
docker exec -i -t nginx-8080 /bin/bash
# 查看当前页面内容【注意：容器内部没有vi/vim】
cat /usr/share/nginx/html/index.html
# 修改当前页面内容
echo '<h1>Hello,Docker!</h1>' > /usr/share/nginx/html/index.html
2）还可以进行bootstarp扩展
参考网址：BootStrap简单使用
echo '<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<!-- 避免中文乱码 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<div class="alert alert-danger" role="alert">
<h4 class="alert-heading">Hello, world!</h4>
<p>我的第一个 Bootstrap 页面</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
<br/>
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 【本地】包括所有已编译的插件 -->
<!--<script src="js/bootstrap.min.js"></script>-->
<!-- 【远程】直接实用远程的bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>' > /usr/share/nginx/html/index.html
3.4、windows自定义nginx的配置和页面路径
上面的操作貌似可以解决我们更换展示页面的问题，但是echo写入文件毕竟有点low，更何况静态页面可能有很多文件夹，所以要进行自动化配置
4、课后习题
4.1、nginx的默认静态页面在什么地方，如何更改？
/usr/share/nginx/html/index.html，最简单方法直接使用echo进行文件写入
网友评论