首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用 docker 作为 Web 开发服务器

使用 docker 作为 Web 开发服务器

原创
作者头像
谢正伟
发布2020-06-08 00:01:49
2.9K0
发布2020-06-08 00:01:49
举报
文章被收录于专栏:云原生研究云原生研究

提供一种思路,临时启动一个 nginx 容器作为服务器来开发前端应用,nginx 作为静态页面发布器,并可以代理远端 API。同时,我们也可以在 shell 中操作打开浏览器,并监控文件的改变并刷新浏览器。php,python 等脚本类的 web 开发也可以使用这个方法,只需要更换相应的 server 镜像作为容器运行的基础环境。

前提条件

  • 安装了 docker:安装方法略。
  • nginx 镜像: docker pull nginx:alpine 。
  • 这个例子使用了 python 作为脚本语言。

以下脚本我在 mac 中运行通过。

nginx 配置

首先配置 nginx,这个脚本会从容器中启动,启动后,容器的 /app 是主目录,并反向代理了 2 组 api。

如果远端服务器是本机,需要从容器内部访问宿主机资源,localhost 是不好使的,请使用域名:host.docker.internal

nginx 的配置如下:

server { 
  listen       8500;
  index   index.html;
  location / {
    index   index.html;
    root    /app;
    expires 1s;
  }
  location ^~/api/crm/ {
    proxy_http_version 1.1;
    proxy_pass      http://host.docker.internal:7304/;
  }
  location ^~/api/qq/ {
    proxy_http_version 1.1;
    proxy_pass      http://www.qq.com/api/;
  }
}

docker

docker 启动脚本如下:

docker run --rm -it -v <publishPath>:/app -v <nginxConfPath>:/etc/nginx/conf.d/server.conf -p 8500:8500 nginx:alpine

直接运行这个脚本,打开 http://localhost:8500,我们的简易开发服务环境就搭建起来了。每次修改文件的时候,刷新浏览器就可以看到改变。

但,如果能自动刷新浏览器就圆满了。下面咱们试着来解决此问题。

开发过程中的自动刷新

我想直接通过外部脚本监控文件的改变。并自动刷新浏览器。

docker 脚本也放在里面一起执行算了。

完成这次任务使用了 python,完整的脚本是这么写的:

#!/usr/bin/env python3
#coding=utf-8

import os 
import subprocess
import webbrowser
import _thread
import time
from selenium import webdriver
from watchdog.observers import Observer
from watchdog.events import FileSystemEventHandler

# 启动浏览器,并访问目标地址
driver = webdriver.Chrome()
driver.get('http://localhost:8500')

# 当前工作目录
cwd = os.getcwd()
# 我当前的发布目录
publishPath = cwd + "/publish"


def dockerServer():
  """ 此函数启动 docker """
  dockerCmd = ['docker', 'run', '--rm', '-it', 
                '-v', publishPath +":/app",
                '-v', cwd+"/server.conf:/etc/nginx/conf.d/server.conf",
                '-p', "8500:8500", 'nginx:alpine']
  print("开始执行 nginx in docker...")
  process = subprocess.run(" ".join(dockerCmd), shell=True, check=True)



def refreshBrowser(delay=1):
  """ 延时 1 秒刷新浏览器,当有大量文件被更新时候,可以丢弃无效刷新动作 """
  print(delay, "秒后刷新浏览器...")
  time.sleep(delay)
  driver.refresh()

class RefreshBrowserHandler(FileSystemEventHandler):
  """ watchdog 的监控事件 """
  def on_modified(self, event):
    refreshBrowser()  # 这里需改进,应该将任务放到线程池里,以便丢弃持续刷新操作。

def watchPublish(path):
  """ watchdog 监控发布目录,一旦发现文件改变,便出发刷新事件 """
  print("正在监控目录改变:", path)
  event_handler = RefreshBrowserHandler()
  observer = Observer()
  observer.schedule(event_handler, path, recursive=True)
  observer.start()
  try:
    while True:
      time.sleep(1)
  except KeyboardInterrupt:
    observer.stop()
  observer.join()


# 启动
_thread.start_new_thread(dockerServer, ())
_thread.start_new_thread(refreshBrowser, (1,))
watchPublish(publishPath)

上面的脚本需要如下的依赖:

  • python 自带的 webbrowser 无法控制刷新浏览器,所以采用了 selenium 包: pip install selenium
  • 我使用了 chome,但提示无法找到 chromedriver,下载一个安装好了,从这里下载:http://npm.taobao.org/mirrors/chromedriver,找到和你当前浏览器版本匹配的安装包。
  • 另外需要安装的包 是 watchdog,也 pip 安装一下。

总结

docker 的 images 平时就在那里安静的躺着,等我们需要开发的时候,启动他,开发完用 ctrl+c 关闭他,由于使用了 --rm,docker 的实例也跟着清除了,很清爽。

推而广之,这种方法对于所有脚本类的 Web 开发都有效,我们无需安装任何环境,只需要临时启动一个 docker 容器就好,处女座程序员可以试试这种方法。


参考:

How to run an function when anything changes in a dir with Python Watchdog?

Selenium with Python

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前提条件
  • nginx 配置
  • docker
  • 开发过程中的自动刷新
  • 总结
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档