大家好，今天来为大家解答修改网站源码分享同步服务器这个问题的一些问题点，包括网站源码修改二次开发工具也一样很多人还不知道，因此呢，今天就来为大家分析分析，现在让我们一起来看看吧！如果解决了您的问题，还望您关注下本站哦，谢谢~
写给前端的Docker实战教程
本篇文章详细而又简短的介绍了：一名完全不了解Docker前端程序员，将全站Docker化的过程。
作者：花生PeA来源：segmentfault|2019-09-2714:33
收藏
分享
本篇文章详细而又简短的介绍了：一名完全不了解Docker前端程序员，将全站Docker化的过程。内容主要包含：
Docker基本概念真实站点迁移过程：静态站点Nodejs站点(Express)WordPress(PHP)一些必备技巧：开机启动、常用Shell
文章会讲解使用Docker过程中用到的全部技术栈(GithubCI、Nginx反向代理、docker-compose)，绝不会出现“详见：http://xxx”甩链接的情况
无需再查阅其他文档，看着一篇就够了!
当前有哪些问题
手动部署成本太高
笔者维护了诸多网站，其中包含：
我的简历：pea3nut.info，使用Vuejs构建的SPA单页应用，纯静态我的博客：pea3nut.blog，使用著名的WordPress搭建(PHP+Apache+MySQL)一个开源项目——Pxer：pxer.pea3nut.org，官网使用Nodejs+ExpressSSR搭建
而每次我想修改某个网站内容是十分麻烦的。拿大家熟悉的纯静态站点来说，修改过程如下：
下载：从Github下载代码，然后本地npminstall开发：npmrundev本地修改代码，测试编译：npmrunbuild使用Webpack进行编译，产出静态资源上传：打开FTP软件，上传替换文件测试：看看网站是否在线上工作正常提交：将代码提交到Github
哪怕我只是修改个错别字，都要十几分钟
网站太多，改动太频繁，而每次不管多小的改动都很麻烦。简直让我感觉自己在维护一个万级QPS的大型项目
某个服务挂了，我不懂Linux无法排查
最近我发现我的MySQL进程总是挂掉，导致所有依赖于MySQL的站点都挂了
我也不知道为什么，之前还是好好的
我尝试了重启进程、重启服务器、捞报错日志百度，均未奏效
好吧，其实我不太懂Linux，也不太懂MySQL，我只是想用下他们搭建WordPress站点。而最近总出问题，让我意识到：
我不仅要维护站点，我还要维护环境
这个对于一名前端来说太难了，装个nvm就已经是我的极限了。MySQL无缘无故挂掉，我根本没有能力查出个一二三四，然后解决它
我不仅要保证站点本地能跑通，还必须要部署在远程VPS稳定运行。。。
重启不行。。。那就只能重装系统了
可是，由于搭建了许多站点，VPS服务器环境相当复杂(或许这就是MySQL挂掉的原因)，光Apache配置文件都几百行了。重做系统的迁移成本，光是想一想就耗光了我所有的勇气
新的技术方案——Docker
总结一下有如下问题：
手动部署成本太高，改错别字都很麻烦一台服务器由于时间累积导致环境变得“脏乱差”重装系统成本太高，难以迁移
而Docker，正是我解决所有问题SCP-500万能药!
那么Docker是如何做的呢?
镜像与容器
Docker中有两个重要概念。
一个是容器(Container)：容器特别像一个虚拟机，容器中运行着一个完整的操作系统。可以在容器中装Nodejs，可以执行npminstall，可以做一切你当前操作系统能做的事情
另一个是镜像(Image)：镜像是一个文件，它是用来创建容器的。如果你有装过Windows操作系统，那么Docker镜像特别像“Win7纯净版.rar”文件
上边就是你所需要了解的Docker全部基础知识。就这么简单
顺便一提，在Docker中，我们通常称你当前使用的真实操作系统为“宿主机”(Host)
安装Docker
安装Docker在你的电脑上就像安装VSCode一样简单
如果你使用的是Windows电脑，需要购买支持虚拟化的版本。如Win10专业版，Win10家庭版是不行的
Mac：https://download.docker.com/mac/stable/Docker.dmgWindows：https://download.docker.com/win/stable/Docker%20for%20Windows%20Installer.exeLinux：https://get.docker.com/
安装完Docker后，你可能会发现自己可以打开一个漂亮的Docker窗口。其实这个窗口没什么用处，通常我们都是通过CLI命令行的方式操作Docker的，就像Git一样
运行Docker
接下来我们搭建一个能够托管静态文件的Nginx服务器
容器运行程序，而容器哪来的呢?容器是镜像创建出来的。那镜像又是哪来的呢?
镜像是通过一个Dockerfile打包来的，它非常像我们前端的package.json文件
所以创建关系为：
Dockerfile:类似于“package.json”\n|\nV\nImage:类似于“Win7纯净版.rar”\n|\nV\nContainer:一个完整操作系统\n
创建文件
我们创建一个目录hello-docker，在目录中创建一个index.html文件，内容为：
<h1>Hellodocker</h1>\n
然后再在目录中创建一个Dockerfile文件，内容为：
FROMnginx\n\nCOPY./index.html/usr/share/nginx/html/index.html\n\nEXPOSE80\n
此时，你的文件结构应该是：
hello-docker\n|____index.html\n|____Dockerfile\n
打包镜像
文件创建好了，现在我们就可以根据Dockerfile创建镜像了!
在命令行中(Windows优先使用PowerShell)键入：
cdhello-docker/打包镜像\n注意！Docker中的选项（Options）放的位置非常有讲究，docker—helpimage和dockerimage—help是完全不同的命令\n
dockerimagebuild./-thello-docker:1.0.0的意思是：基于路径./(当前路径)打包一个镜像，镜像的名字是hello-docker，版本号是1.0.0。该命令会自动寻找Dockerfile来打包出一个镜像
Tips:你可以使用dockerimages来查看本机已有的镜像\n
不出意外，你应该能得到如下输出：
SendingbuildcontexttoDockerdaemon3.072kB\nStep1/3:FROMnginx\n—>5a3221f0137b\nStep2/3:COPY./index.html/usr/share/nginx/html/index.html\n—>1c433edd5891\nStep3/3:EXPOSE80\n—>Runninginc2ff9ec2e945\nRemovingintermediatecontainerc2ff9ec2e945\n—>f6a472c1b0a0\nSuccessfullybuiltf6a472c1b0a0\nSuccessfullytaggedhello-docker:1.0.0\n
可以看到其运行了Dockerfile中的内容，现在我们简单拆解下：
FROMnginx：基于哪个镜像COPY./index.html/usr/share/nginx/html/index.html：将宿主机中的./index.html文件复制进容器里的/usr/share/nginx/html/index.htmlEXPOSE80：容器对外暴露80端口
运行容器
我们刚刚使用Dockerfile创建了一个镜像。现在有镜像了，接下来要根据镜像创建容器：
dockercontainercreate-p2333:80hello-docker:1.0.0\ndockercontainerstartxxxxxx为容器ID\n
原理实际上是启动了容器内的/bin/bash，此时你就可以通过bashshell与容器内交互了。就像远程连接了SSH一样
发生了什么
我们总结下都发生了什么：
写一个Dockerfile使用dockerimagebuild来将Dockerfile打包成镜像使用dockercontainercreate来根据镜像创建一个容器使用dockercontainerstart来启动一个创建好的容器
虽然很简单，但是也没有感觉到“广阔天地，大有可为，为所欲为”呢?
迁移静态站点
接下来我们实战迁移一个由Vuejs写的纯静态SPA单页站点：
网址：pea3nut.info源码：github/pea3nut-info
我打算怎么做
在没迁移Docker之前，若我想更新线上网站中内容时，需要：
本地npmrunbuild打包产出静态文件手动通过FTP上传到服务器gitpush更新Github源码
稍微有点麻烦，因此我打算这样改：
执行gitpush自动检测到github有代码更新，自动打包出一个Docker镜像CI编译完成后，SSH登录VPS，删掉现有容器，用新镜像创建一个新容器
而这样做的好处是：
不必再手动FTP上传文件当我进行修改错别字这样的简单操作时，可以免测。改完直接gitpush，而不必本地npmrunbuild
Github中的CI
首先是让Github在我每次更新代码时打包出一个镜像
在Github，可以有免费的CI资源用，它就是TravisCI
在项目中根目录中添加.travis.yml文件，内容如下：
language:node_js\nnode_js:\n-“12″\nservices:\n-docker\n\nbefore_install:\n-npminstall\n\nscript:\n-npmrunbuild\n-echo”$DOCKER_PASSWORD”|dockerlogin-u”$DOCKER_USERNAME”–password-stdin\n-dockerbuild-tpea3nut/pea3nut-info:latest.\n-dockerpushpea3nut/pea3nut-info:latest\n
文件内容非常简单，就是使用npmrunbuild编译静态产出后，打包一个镜像并且push到远程。有几点需要详细说一下：
为了能够让镜像上传到服务器，你需要在hub.docker.com中注册一个账号，然后替换代码中的pea3nut/pea3nut-info:latest为用户名/包名:latest即可使用Github登录TravisCI后，在左边点击+加号添加自己的Github仓库后，需要移步到Setting为项目添加DOCKER_USERNAME和DOCKER_PASSWORD环境变量。这样保证我们可以秘密的登录DockerHub而不被其他人看到自己的密码。如下图
然后需要添加Dockerfile文件来描述如何打包Docker镜像。
按照.travis.yml的命令次序，在打包镜像时，npmrunbuild已经执行过了，项目产出已经有了。不必在Docker容器中运行npminstall和npmrunbuild之类的，直接复制文件即可：
FROMnginx\n\nCOPY./dist//usr/share/nginx/html/\n\nEXPOSE80\nNote:过程虽然简单但是线条很长，建议本地多测试测试再进行gitpush\n
若你编译出的静态站点也是一个SPA单页应用，需要增加额外的Nginx配置来保证请求都能打到index.html。下边是我写的vhost.nginx.confNginx配置文件，将不访问文件的请求全部重定向到/index.html：
server{\nlisten80;\nserver_namelocalhost;\nlocation/{\nroot/usr/share/nginx/html;\nindexindex.htmlindex.htm;\nproxy_set_headerHost$host;\n\nif(!-f$request_filename){\nrewrite^.*$/index.htmlbreak;\n}\n\n}\n\nerror_page500502503504/50x.html;\nlocation=/50x.html{\nroot/usr/share/nginx/html;\n}\n}\n
然后在Dockerfile中新加一行，将本机的vhost.nginx.conf文件复制到容器的/etc/nginx/conf.d/pea3nut-info.conf，让Nginx能够读取该配置文件：
FROMnginx\n\nCOPY./dist//usr/share/nginx/html/\n+COPY./vhost.nginx.conf/etc/nginx/conf.d/pea3nut-info.conf\n\nEXPOSE80\n
然后执行gitpush后，你可以在TravisCI看到CI的编译结果。如果编译没问题，远程实际上就有了pea3nut/pea3nut-info:latest这个镜像。本地可以试试看该镜像工作是否正常：
dockerimagepullpea3nut/pea3nut-info:latest\ndockercontainercreate-p8082:80pea3nut/pea3nut-info:latest\ndockercontainerstartxxx下载安装脚本\nshinstall-docker.sh更新软件包\napt-getinstallnginx查看Nginx状态\n
此时本地通过浏览器访问VPS的公网IP可用看到Nginx的欢迎页面
然后在VPS服务器的/etc/nginx/conf.d/中建立一个vhost.conf文件，配置如下内容：
server{\nlisten80;\nserver_namepea3nut.info;\n\nlocation/{\nproxy_passhttp://127.0.0.1:8082;\n}\n}\n
配置的意思是，监听来自80端口的流量，若访问域名是pea3nut.info(替换为你自己的域名)，则全部转发到http://127.0.0.1:8082中
配置完成后，重启Nginx服务器。若是Ubuntu可以使用systemctlrestartnginx命令，不同Linux发行版稍有不同
配置成功后，访问pea3nut.info会看到和VPS公网IP:8082相同的效果
更新站点
而迁移完成Docker后，我想改一个错别字的流程变为：
本地修改完成，执行gitpush等待CI编译完成登录VPS服务器，执行：
dockerimagepullpea3nut/pea3nut-info:latest\ndockercontainercreate-p8082:80pea3nut/pea3nut-info:latestxxx为当前运行的容器ID，可用dockercontainerls查看\ndockercontainerstartyyy这个是配置文件的版本，不同的版本号声明方式会有细微的不同\nservices:\ninfo:\ncontainer_name:pea3nut-info\nimage:pea3nut/pea3nut-info:latest\nports:\n-“8082:80″\nrestart:on-failure\n
然后在目录中键入如下命令就能将服务跑起来：
docker-composeupinfo\n
docker-compose会帮我们自动去拉镜像，创建容器，将容器中的80端口映射为宿主机的8082端口。restart字段还要求docker-compose当发现容器意外挂掉时重新启动容器，类似于pm2，所以你不必再在容器内使用pm2
如果想要更新一个镜像创建新容器，只需要：
docker-composepullinfo\ndocker-composestopinfo\ndocker-composerminfo\ndocker-composeup-dinfo#-d代表后台运行\n
笔者已将自己网站部署方式开源，可参考github/pea3nut-hub
迁移WordPress站点(Apache+PHP+MySQL)
接下来我们实战迁移一个WordPress站点
网址：pea3nut.blog源码：非公开
可能你也发现了这个站点和其他站点的一个非常大的不同——他的源码和数据是不能公开的
之前我们打包镜像时，都是直接将代码打进镜像内的。这条方案用在这里显然是不行的，有两个问题：
我不想公开MySQL数据文件和网站内容(如图片)。若将这些打包进镜像，任何人都能dockerimagepull下载到镜像，然后取得镜像内的文件当容器被删掉，存储的MySQL数据都将丢失
Volume
Docker提供了一个叫做Volume的东西，可以将容器内和宿主机的某个文件夹进行”绑定“，任何文件改动都会得到同步。所以，我可以将整个站点目录和MySQL目录都挂载为Volume。这样，当容器删除时，所有数据文件和源码都会保留。
在本地建立./blog/mysql-data目录存储MySQL数据，建立./blog/wordpress目录存储WordPress源码。然后修改docker-compose.yml如下：
version:”3.7″\nservices:\ninfo:\ncontainer_name:pea3nut-info\nimage:pea3nut/pea3nut-info:latest\nports:\n-“8082:80″\nrestart:on-failure\n+blog:\n+container_name:pea3nut-blog\n+image:tutum/lamp:latest\n+ports:\n+-“8081:80″\n+volumes:\n+-./blog/mysql-data:/var/lib/mysql\n+-./blog/wordpress:/app\n+restart:on-failure\n
可以看到这次根本没有打包镜像，而是直接使用tutum/lamp镜像提供的LAMP环境(Linux+Apache+MySQL+PHP)，然后将MySQL数据目录/var/lib/mysql和源码目录/app都挂载出来就可以了
Tips:通过Volume我们只是解决了部署问题，而如何本地开发然后将源码同步到服务器呢?用FTP当然是可以的，但是稍微有点麻烦。其实你可以自建一个Git服务器!
END，本文到此结束，如果可以帮助到大家，还望关注本站哦！