开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在CraftCMS容器上运行BrowserSync？

在CraftCMS容器上运行BrowserSync是一种在开发过程中实现实时浏览器同步的方法。以下是一种可行的步骤：

确保你已经安装了Docker和Docker Compose，并且能够使用命令行工具。
在CraftCMS项目的根目录下创建一个名为docker-compose.yml的文件，并添加以下内容：

version: '3'
services:
  app:
    build:
      context: .
      dockerfile: .docker/Dockerfile
    ports:
      - 80:80
    volumes:
      - .:/var/www/html
    depends_on:
      - browser-sync
  browser-sync:
    build:
      context: .
      dockerfile: .docker/Dockerfile.browser-sync
    ports:
      - 3000:3000
    volumes:
      - .:/var/www/html

在CraftCMS项目的根目录下创建一个名为.docker的目录，并在该目录下创建一个名为Dockerfile的文件，并添加以下内容：

FROM php:7.4-apache

RUN apt-get update && apt-get install -y \
    git \
    libpng-dev \
    libjpeg-dev \
    libfreetype6-dev \
    libzip-dev \
    && docker-php-ext-configure gd --with-freetype --with-jpeg \
    && docker-php-ext-install -j$(nproc) gd zip pdo_mysql opcache \
    && a2enmod rewrite

在.docker目录下创建另一个名为Dockerfile.browser-sync的文件，并添加以下内容：

FROM node:12

WORKDIR /var/www/html

RUN npm install -g browser-sync

CMD ["browser-sync", "start", "--proxy", "app:80", "--files", "/var/www/html/**/*"]

打开终端，进入CraftCMS项目的根目录，并运行以下命令来构建和启动容器：

docker-compose up -d

当容器启动后，你可以通过访问http://localhost来访问CraftCMS站点。同时，BrowserSync也会运行在http://localhost:3000上。

通过上述步骤，你可以在CraftCMS容器上成功运行BrowserSync，实现实时浏览器同步的功能。这样，在你进行前端开发时，任何修改都会自动同步到浏览器中，极大地提高了开发效率。

请注意，以上步骤仅适用于CraftCMS容器，并且假设你已经熟悉Docker和Docker Compose的基本用法。

相关搜索:如何在Tomcat容器上运行.jar？如何在本地Kubernetes上运行Windows容器？如何在Windows Server 1809上运行Mongo容器如何在容器化服务器上运行容器化Cypress runner？如何在连接mongodb的docker容器上运行钢梁在docker容器上运行iis 如何在同一端口的apache vhost上使用browsersync？如何在arm64板上运行LXC Ubuntu容器如何在容器中运行镜像？在lxc容器上运行qtcreator 4.0.1 无法在docker上运行Raspbian容器 raspbian上的Docker不会运行容器如何在运行的docker容器上公开更多端口如何在mcr.microsoft.com/powershell容器上运行`powershell`命令 mac上docker容器上的Mongodb映像运行问题如何在Heroku中运行Docker容器如何在Docker容器中运行命令在windows server 2019上运行linux容器 Docker容器未在浏览器上运行如何在XAML中的容器(如dll)中获取特定图标？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

打造前端MAC工作站（十）效率工具 Browsersync ，文件保存浏览器自动刷新

本文介绍了如何利用Browsersync这个工具提高前端开发效率，通过具体的使用场景和命令行参数进行了详细说明。

【Vue】使用 Vue2 开发一个项目列表展示应用

一直没有找到一个合适的展示个人项目的模板，所以自己动手使用 Vue 写了一个。该模板基于 Markdown 文件进行配置，只需要按一定规则编写 Markdown 文件，然后使用一个在线工具转为 JSON 文件即可。下面是该项目的在线地址和源码。本文主要记录一下项目中用到的相关知识。

01

让 F5 歇一会儿——laravel-mix 自动刷新之道

原文链接：https://segmentfault.com/a/1190000018863373

02

第六课技术小白如何开发一个DAPP区块链应用(以宠物商店为例)

通过逐步的指导和截图举证，一步步带领一个技术小白完成一个宠物商店DAPP应用的开发和部署。

04

Gulp开发教程（翻译）

对网站资源进行优化，并使用不同浏览器测试并不是网站设计过程中最有意思的部分，但是这个过程中的很多重复的任务能够使用正确的工具自动完成，从而使效率大大提高，这是让很多开发者觉得有趣的地方。

04

自动调试自动编译五分钟上手

Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。无论您是前端还是后端工程师，使用它将提高您30%的工作效率。 MD5加密： import crypto from "crypto"; function md5(data) { let Buffer = require("buffer").Buffer; let buf = new Buff

07

给初学者的Gulp教程（译）

Gulp是一个在你开发web时，帮助你完成几个任务的工具。它经常用来进行一些前端任务，比如：

02

gulp 实现纯html、css、bootstrap 的打包

在开发 web 项目时，我们通常需要将 HTML、CSS、JavaScript 等文件打包成静态文件，以便于部署和运行。gulp 是一个流行的 JavaScript 流的构建工具，可以帮助我们自动化这个过程，相比webpack，我个人觉得gulp是一个较为轻量的打包工具了。本文将介绍如何使用 gulp 实现纯 HTML、CSS、Bootstrap 的打包。

02

前端工程化 | 定制专属提速“外挂”（上）

友情提示：推荐阅读时间15分钟 + 练习时间15分钟 HTML5学堂：上一期给大家分享了Gulp的安装与使用，让大家对Gulp有着初步的认识。咱们学习使用Gulp的目的是提升开发效率，把开发过程中重复性的工作交给Gulp，让Gulp按照你的配置去完成操作。 Gulp本身给开发者提供了5个API接口，可以根据这些接口来开发Gulp插件。但是，Gulp目前拥有丰富的插件资源，开发人员可以根据项目的需求和个人偏好来配置使用这些插件，比如可以配置当修改了HTML文件浏览器自动刷新，也可以配置修改了CSS文件浏览器自

05

从零开始构建你的 Gulp

图片本篇博文的内容根据 Introduction to Gulp.js 系列文章拓展而来，其代码、依赖包及目录结构部分均有所更改，更多详细内容，敬请参考

04

Laravel Mix 初探

针对 Laravel 优化了的 Laravel Mix, 提供了高效优雅的 API，用于使用几个常见的 CSS 和 JavaScript 预处理器为应用定义 Webpack 构建步骤，基本可以使到 80% 的webpack用例都变得简单明了。

06

H5Canvas入门（上）（下）

前言本系列教程是专门给设计师写的快速入门教程，只要一步步跟随本教程，即可轻松进入编程的世界。学习成果用canvas制作带有图案的封面。 a、了解HTML、CSS、JS基本的结构 b、<canvas>会写文字，更改颜色 c、<canvas>绘制图案 d、Browsersync的使用手机截图目录 1、需要准备什么？ 2、HTML文件的基本骨架 3、Canvas的属性设置 4、script标签 1、需要准备什么？只要有一台电脑就行！本教程推荐浏览器使用谷歌chrome浏览器，编程工具用

05

前端启动本地服务的四种方法，看完不会你锤我

前边几篇文章介绍本地缓存，还有 WebSocket 等好多需要在服务内才能运行，上一篇介绍移动端适配，更是需要在手机端访问页面，此时就不得不介绍下如何在本地启动服务，及手机如何访问？

03

角落的开发工具集之Vs（Visual Studio)2017插件推荐

Visual Studio 2017 扩展 Visual Studio 2017 15.4.4 : 目前是最新的版本号，所有的工具&插件都支持这个版本号。所以请对号入座。 ReSharper : 首先的是Resharper,这个基本是目前是我开发过程中必备的工具集，唯一的缺点就是吃内存，所以你的内存要是低于8G，就不要使用它了。它的特点可以快速重构、高亮显示错误、导航和搜索都很方便、智能提示、智能复制这个我特别喜欢等等，用着它你会感受到很多惊喜。 Extensibility Tools :必备工具，他是基

09

前端自动刷新工具

Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。

03

前端启动本地服务的四种方法，看完不会你锤我

前边几篇文章介绍本地缓存，还有 WebSocket 等好多需要在服务内才能运行，上一篇介绍移动端适配，更是需要在手机端访问页面，此时就不得不介绍下如何在本地启动服务，及手机如何访问？

01

前端启动本地服务的四种方法，看完不会你锤我

前边几篇文章介绍本地缓存，还有 WebSocket 等好多需要在服务内才能运行，上一篇介绍移动端适配，更是需要在手机端访问页面，此时就不得不介绍下如何在本地启动服务，及手机如何访问？

02

Gulp探究折腾之路(I)

前言: gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。相比于grunt的频繁 IO 操作，gulp的流操作，能更快地更便捷地完成构建工作。此处仅记录初步折腾中所遇点滴以及待解决的点。 Gulp折腾之初探折腾之战略上的藐视回过头看Gulp的折腾历程，使用还是非常简易的。初步入门资料可参考这里。所以战略上一定要藐视”她”;当然战术上要

08

第210天：node、nvm、npm和gulp的安装和使用详解

它不是JS文件，也不是JS框架，而是Server side JavaScript runtime，当服务端的一个JS文件运行时，会被NODE拦截，在NODE中运行JS代码。JS由ES（ECMAScript），DOM，BOM 组成，目前运行在浏览器内核中，NODE中只能运行ECMAScript，无法使用DOM，BOM。

01

Gulp安装流程、使用方法及cmd常用命令导览

Gulp安装流程、使用方法及CMD常用命令导览来自前端小白的gulp及周边知识学习总结　　　　一、名词介绍： Npm——node包管理工具一开始我不理解，包管理工具是什么鬼。后来用到的gulp也好，gulp的插件包也好，都是要在npm这个里边弄出来的。可以理解为，一个硬盘，里边放的各种整理好的、适用于各种功能的且不重复的文件夹（插件），然后我们需要啥，就去里边摘下来。当然也可以用它来删除插件 rimraf删除gulp的模块插件 1、安装：npm install -g rimraf（全局安装），如果

06

node和gulp实现前端工程自动化(附：gulp常用插件)

/** * 1. LESS编译压缩合并 * 2. JS合并压缩混淆 * 3. img复制 * 4. html压缩 */

01

从开发一款基于Vue技术栈的全栈热重载生产环境脚手架，我学到了什么？

今天，我们来搞一个新东西，名字叫基于Vue技术栈的全栈热重载生产环境脚手架。实话说，这个名字我想了很久。最终，还是以这个名字作为文章标题。我先拆分解释下：全栈的意思是支持前后端；热重载这个名词相信大家很熟悉，就是页面每次改动，不需要手动去刷新，可自动刷新；生产环境这里你可以理解成线上环境，用户使用的环境。

02

软件测试新趋势 | TW洞见

今日洞见文章作者/图片来自ThoughtWorks：林冰玉。本文所有内容，包括文字、图片和音视频资料，版权均属ThoughtWorks公司所有，任何媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布/发表。已经本网协议授权的媒体、网站，在使用时必须注明"内容来源：ThoughtWorks洞见"，并指定原文链接，违者本网将依法追究责任。 2015年11月，ThoughtWorks发布了新一期的技术雷达。技术雷达是以独特的形式记录ThoughtWorks技术顾问委员会对行业产生重大影响

在手机上查看移动Web页

我最近在学习做移动端页面，当做好一个移动端页面后想使用手机查看一下移动端页面在手机上的效果，找了很久才找到一个比较好的方法，特意写这篇文章记录下在手机上查看移动端页面的方法

02

使用 Jenkins X、Kubernetes 和 Spring Boot 实现 CI/CD

过去五年中的变化，如迁移到公有云以及从虚拟机向容器的转变，已经彻底改变了构建和部署软件的意义。

01

用Kubernetes部署超级账本Fabric的区块链即服务(1)

【注：下载本文PDF版本以及本文源代码，可关注本公众号：亨利笔记，后台发送消息“区块链即服务” 或 “baas”即可。】

02

第二十三课如何部署TRUFFLE智能合约到以太坊主网(以宠物商店为例)1，摘要2，操作内容3，常见问题和解决方法4，参考

通过《第六课技术小白如何开发一个DAPP区块链应用(以宠物商店为例)》学习，大家掌握了一个DAPP的编程和以太坊私有测试环境调试，本文做进一步的技术深入学习。【本文目标】（1）采用INFURA配置的方式把智能合约部署到ROPSTEN测试网络；（2）采用INFURA配置的方式把智能合约部署到以太坊主网络；（3）了解采用.env配置的方式把助记词保存到本地防止泄露；

04

Yeoman 官网教学案例：使用 Yeoman 构建 WebApp

STEP 1：设置开发环境与 Yeoman 的所有交互都是通过命令行。Mac 系统使用 terminal.app，Linux 系统使用 shell，windows 系统可以使用 cmder/Powe

07

Gulp 在金蝶云平台项目中的使用经验

00

【第3期】前端常用插件、工具类库汇总

iSlider是一个表现出众，无任何插件依赖的手机平台javascript滑动组件。它能够处理任何元素，例如图片或者DOM元素

01

在Docker中运行纸壳CMS并配置使用MySql

纸壳CMS是基于ASP.Net Core开发的可视化内容管理系统，可以跨平台部署，可以在容器中运行。接下来看看如何在docker中运行纸壳CMS。

00

WEB前端：“懒人”养成计划

何为懒？懒在人一开始的印象中，总是给人一种不好的感觉，勤奋一直是传统美德，懒是坏东西。然而事实真是这样吗？最近看过一篇关于懒人科技的文章，觉得很有道理，文章有如下部分：人类历史上曾诞生了琳琅满目的懒人科技，不断迁就着人性的弱点，有汽车、火车、飞机这种大型地、颠覆式发明，也有一些非常酷炫的小型创意，甚至还诞生了不错的服务，事实上，整个第三产业的市场就是来源于“懒人不想做的事情”。这些创意在改变人类生活的同时，也改变了懒汉的定义，在拥有了大量的新鲜玩意之后，他们的境界正大有提高，事实上，懒已经不是完全意义上

08

在Spectrum测试链用Truffle启动第一个宠物商店Dapp

在光谱链上实现一个Dapp，就是合约部署完之后（有一个我们可以直接与他交互的后端），然后做这个应用层的代码和后端的交互，给DApp加上前端数据交互、读取的界面。

03

使用 Jenkins X、Kubernetes 和 Spring Boot 实现 CI/CD

过去五年中的变化，如迁移到公有云以及从虚拟机向容器的转变，已经彻底改变了构建和部署软件的意义。

07

云原生周报第 1 期 | 2019-06-24~2019-06-28

云原生不但可以很好的支持互联网应用，也在深刻影响着新的计算架构、新的智能数据应用。以容器、服务网格、微服务、Serverless 为代表的云原生技术，带来一种全新的方式来构建应用。笔者是一名云原生狂热信徒，长期以来我都不知道该怎么整理自己的收藏夹。最近想到，为了让大家能够掌握云原生最新资讯，我决定把我的收藏夹共享出来，大家一起嗨~~

03

如何在Ubuntu上 dockerize和部署多个WordPress应用程序

WordPress已成为世界上最常见的部署和使用的Web应用程序之一。由于多年的不断发展，现在可以基于WordPress及其可用的插件/扩展创建几乎无数的不同网站（甚至是网络应用程序）。

04

探索人工智能的世界：构建智能问答系统之环境篇

在之前的一篇文章中，我们已经对项目所需的知识点进行了简单的了解。今天，我们将开始搭建整个项目的环境。在接下来的文章中，我们将详细介绍如何配置项目所需的各种工具和环境，以确保项目的顺利进行。

02

一条nginx命令引发的对于容器的思考

去年的时候写了一篇原创《前后端分离，如何在前端项目中动态插入后端API基地址？（in docker）》，我自认为这篇生产实践是对大前端、容器化、CI/CD的得意之作。

01

打造前端 Deepin Linux 工作环境——配置静态服务器

本文主要介绍了如何打造前端 Deepin Linux 工作环境并配置静态服务器。首先介绍了如何安装 xampp，然后讲解了如何利用 python 和 nodejs 安装静态服务器。最后，介绍了如何安装 Browsersync，并使用它来自动刷新浏览器，提高开发效率。

08

如何使用Docker Compose安装Drupal

The author selected United Nations Foundation to receive a donation as part of the Write for DOnations program.

02

Docker最全教程——数据库容器化之持久保存数据（十二）

上一节我们讲述了SQL Server容器化实践（注意，SQL Server现在也支持跨平台），本节将讲述如何持久保存数据，并且接下来将逐步讲解其他数据库（MySql、Redis、Mongodb等等）的容器化实践，中间再穿插一些知识点和实践细节。

03

Docker最全教程——数据库容器化之持久保存数据（十一）

上一节我们讲述了SQL Server容器化实践（注意，SQL Server现在也支持跨平台），本节将讲述如何持久保存数据，并且接下来将逐步讲解其他数据库（MySql、Redis、Mongodb等等）的容器化实践，中间再穿插一些知识点和实践细节。由于实践需要花费大量的时间，而目目前业务繁忙，只能加班来进行一些实践并编写，如果编写比较慢，请多多海涵。

02

cAdvisor：Google的容器性能监控工具

大家好，天我们要聊聊的是 cAdvisor。cAdvisor，全称 Container Advisor，是由 Google 开发并开源的一款用于监控和分析容器性能的工具。它的主要功能包括实时收集、处理和提供容器的资源使用情况和性能特性。它支持 Docker 容器，并且可以在任何 Linux 主机上运行。

01

铂链第5课如何在BOTTOS上搭建第一个DAPP应用[C++程序]？

本文在学习者已完成BOTTOS本地节点搭建，钱包创建的前提下，演示如何通过前端调用BOTTOS智能合约程序（C++程序）查询交易执行结果和SDK调用的方法。

02

容器数据卷：

相当于redis里面的RDB和AOF持久化，挂载本地的一个目录到container里面，用来存放需要永久保存的数据

03

如何给容器内的java服务设置环境变量参数？

将环境变量设置给容器内的Java服务，我们需要在Java服务的Docker镜像中添加对这些环境变量的支持。在Java应用程序的启动命令中，您需要引用这些环境变量，以便在运行时使用它们设置Java堆内存参数。

03

利用 Docker 构建一个简单的 java 开发编译环境

目前 Java 语言的版本很多，除了常用的 Java 8，有一些遗留项目可能使用了 Java 7，也可能有一些比较新的的项目使用了 Java 10 以上的版本。如果想切换自己本地的 Java 开发环境，折腾起来还是需要花费一些时间的，并且日后在不同版本间切换每次都要折腾一次。

01

用 Cricket 在 Java 环境里构建极简的内容管理服务器

原文地址：https://dzone.com/articles/minimalistic-cms-microservice-for-java

05

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭