Docker for WordPress: Commit Log - Supercharged

Chrome for Developers · Intermediate ·📰 AI News & Updates ·8y ago

Key Takeaways

Shows how to use Docker for WordPress development

Full Transcript

[Music] so when I thought about developing for WordPress I thought about having to configure Apache and my sequel and all these things it actually kind of scared me and then I thought this would be a really good opportunity to finally look into docker and learn how docker works in both local development and for deployment and all these things and in the end I have to say I have no regrets it turned out to be a really great setup and I want to show you how it works you can even run this entire setup on your machine locally before we dive in just keep in mind that I didn't just pull this out of a hat at the very start this is a result of many iterations on my end and lots of failure and lots of frustration but in the end I had a setup that I really liked and before we start I think I should make sure that we all know what darker actually is docker is a way to run virtual machines and not just virtual emulated machines but actually containers like isolated from the host system and we're gonna have two of these containers running one for Apache PHP and the WordPress code and one for the database which is my sequel we can put these containers in their own little virtual networks so they only can talk to each other in two nothing else and also no other docker container that might be running can talk to them and we're only going to expose port 8080 from the Apache machine because that's where the web server is running and that's the thing that we want to talk to so you configure these virtual machines by writing so called docker files so in this case we need to write two darker felts one for Apache on PHP in WordPress and one for my sequel so let's start with the my sequel container we can use the official my sequel image and if we read through the readme we will actually find the command that we can just copy paste and just adjust to our needs so the only thing that we need to change is set the password for the root account and we need to add it to a network so that we have it in isolation where we can later add on the Apache so we can just change the command accordingly one of the things we need to keep in mind is that these containers volatile so there should be throw away and recreate able at any point in time without creating a disturbance in the system so any kind of data that we want to persist between these tear downs recreation phases we need to persist to the host system and that's where volumes come into play which basically is mounting a directory from the whole system into the container and in this case we're going to store all of my sequel data in one of these mounted folders the other container for Apache PHP on WordPress we can actually use the official WordPress image which already takes care of configuring Apache and PHP to work together as WordPress expects and just surfs up WordPress for you again the only thing we need to worry about is to add the network flag so that the Mike's secret container and the WordPress container can talk to each other and if we run this command you can already see that WordPress is being served up and is completely working which I thought was pretty amazing with just two containers but for my development flow I wanted to have something more I wanted to have it hb2 because it makes websites so much faster so to achieve that I wanted to add a third container that runs caddy caddy is an HTTP to server that runs as a reverse proxy and has a very tight integration with let's encrypt so in this case I would run it as a reverse proxy in front of Apache and expose a new port to it in this case it would be 8 4 4 3 and that means that on the port a 4 4 3 I would get the entire app served over hb2 with a locally signed TLS certificate while on 8080 the old hb1 version would be served up ok once again we start with reading the readme of the image that we are going to use we can copy paste the command just into little adjustments once again we have the port in this case we have the configuration file for caddy and we have as always the network flag so the caddy ends up in the same network as all our other two containers for the configuration file for caddy we need to define where the requests are supposed to go so we need to use Caddy's proxy command to tell that all incoming requests are supposed to be forwarded to a machine called pwp which is the machine that runs Pachi PHP and WordPress additionally though we need to add some headers to the forward request because the back end needs to know that even though it's receiving HTTP requests that they were originally actually HTTP and that enables a slightly different machinery inside WordPress this is the only bit where we need to monkey patch a little bit inside WordPress but that's because that's how their official wiki is documenting this process and they don't have this HTTP handling built in then we need to tell Kelly that we want to use a self-signed certificate so we don't actually want to go let's encrypt but just create a certificate yourself for local development that's fine if we were to go to production we could just remove that line and Kathy would actually request a real sign certificate from let's encrypt and the entire machinery would just work even on a real server which kind of blew my mind that we can just use the exact same setup for local development and for production so if we run this additional third machine you can see that we now have the exact same effect as before that everything is working but this time it's now over HTTP too which is amazing however we now have three individual machines that we need to configure and that can get quite cumbersome and this is where so-called orchestration comes into play for orchestration docker has the command docker compose we write a compose file to describe how all your individual machines are supposed to work together so this is what really makes this thing really frictionless to write or compose file we just create a new Yano file docker compose clusters are always in their own little network so we don't need to worry about the network flag anymore and now it's basically just a list of the machines that we need so the first service in our docker compose file is the my sequel service and we're going to define the my cycle password the image to use and the volume you want to mount that holds all the my sequel data the second service is the WordPress image with Apache and PHP which also needs the my sequel password and the port to listen on and the third service now is caddy which needs the image the configuration file for caddy and the second port that we want to expose to the host machine so this configuration file we can now save and run with a command docker compose up and as you can see if you run this command we immediately have our entire system set up and we can just start using WordPress out-of-the-box so we use docker to define our developer environment and you just spin it up and tear down with just one command but also we can use it in production which i think is pretty great next time we're going to write our very first lines of PHP and I'm really excited about that so if you want to see that subscribe to this channel and I will see you next time [Music]

Original Description

Surma is building a PWA using WordPress. In this series, he explains every step taken and every revelation had. If you have questions, feel free to leave them in the comments. This episode: How to use Docker to set up a development environment. Find the code here → https://goo.gl/Ykwhfr Follow Surma on Twitter → https://twitter.com/DasSurma Watch more episodes of Supercharged here → https://goo.gl/WFD8py Subscribe to the Google Chrome Developers channel → http://goo.gl/LLLNvf
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Chrome for Developers · Chrome for Developers · 0 of 60

← Previous Next →
1 Polymer Performance Patterns (The Polymer Summit 2015)
Polymer Performance Patterns (The Polymer Summit 2015)
Chrome for Developers
2 Polymer Power Tools (The Polymer Summit 2015)
Polymer Power Tools (The Polymer Summit 2015)
Chrome for Developers
3 Chrome Dev Summit 2014 – Chrome Case Studies
Chrome Dev Summit 2014 – Chrome Case Studies
Chrome for Developers
4 Web Directions Code 2015 round up
Web Directions Code 2015 round up
Chrome for Developers
5 Maintainable Code - HTTP203
Maintainable Code - HTTP203
Chrome for Developers
6 iron-ajax… wat?! -- Polycasts #26
iron-ajax… wat?! -- Polycasts #26
Chrome for Developers
7 The Guardian - Supercharged
The Guardian - Supercharged
Chrome for Developers
8 ES2015 (next version of JavaScript), Totally Tooling Tips (S2 Ep1)
ES2015 (next version of JavaScript), Totally Tooling Tips (S2 Ep1)
Chrome for Developers
9 #AskPolymer: Rob answers all the questions ever -- Polycasts #27
#AskPolymer: Rob answers all the questions ever -- Polycasts #27
Chrome for Developers
10 The Future of JavaScript - HTTP203
The Future of JavaScript - HTTP203
Chrome for Developers
11 Data Binding 101 -- Polycasts #28
Data Binding 101 -- Polycasts #28
Chrome for Developers
12 The Guardian part 2 - Supercharged
The Guardian part 2 - Supercharged
Chrome for Developers
13 The Future of Web Audio: with Chris Wilson and Chris Lowis
The Future of Web Audio: with Chris Wilson and Chris Lowis
Chrome for Developers
14 Chrome 46: New motion-path animations, client hints and service worker improvements
Chrome 46: New motion-path animations, client hints and service worker improvements
Chrome for Developers
15 Sublime Snippets, Totally Tooling Tips (S2 Ep2)
Sublime Snippets, Totally Tooling Tips (S2 Ep2)
Chrome for Developers
16 #AskPolymer: How do you make the show? -- Polycasts #29
#AskPolymer: How do you make the show? -- Polycasts #29
Chrome for Developers
17 Critical Path CSS, Totally Tooling Tips (S2 Mini Tip #1)
Critical Path CSS, Totally Tooling Tips (S2 Mini Tip #1)
Chrome for Developers
18 Binding to Objects -- Polycasts #30
Binding to Objects -- Polycasts #30
Chrome for Developers
19 Player FM - Supercharged
Player FM - Supercharged
Chrome for Developers
20 Where’s the Designer? #AskPolymer -- Polycasts #31
Where’s the Designer? #AskPolymer -- Polycasts #31
Chrome for Developers
21 Jake Beats Wikipedia - HTTP203
Jake Beats Wikipedia - HTTP203
Chrome for Developers
22 Supercharged Observers! -- Polycasts #32
Supercharged Observers! -- Polycasts #32
Chrome for Developers
23 Jai's Web blog - Supercharged
Jai's Web blog - Supercharged
Chrome for Developers
24 Windows Command-line Tooling, Totally Tooling Tips (S2, Ep4)
Windows Command-line Tooling, Totally Tooling Tips (S2, Ep4)
Chrome for Developers
25 What about internationalization? #AskPolymer -- Polycasts #33
What about internationalization? #AskPolymer -- Polycasts #33
Chrome for Developers
26 Developing for Billions (Chrome Dev Summit 2015)
Developing for Billions (Chrome Dev Summit 2015)
Chrome for Developers
27 Google+ Performance Improvement Comparison
Google+ Performance Improvement Comparison
Chrome for Developers
28 Deploying HTTPS: The Green Lock and Beyond (Chrome Dev Summit 2015)
Deploying HTTPS: The Green Lock and Beyond (Chrome Dev Summit 2015)
Chrome for Developers
29 Progressive Web Apps (Chrome Dev Summit 2015)
Progressive Web Apps (Chrome Dev Summit 2015)
Chrome for Developers
30 Instant Loading with Service Workers (Chrome Dev Summit 2015)
Instant Loading with Service Workers (Chrome Dev Summit 2015)
Chrome for Developers
31 Increase Engagement with Web Push Notifications (Chrome Dev Summit 2015)
Increase Engagement with Web Push Notifications (Chrome Dev Summit 2015)
Chrome for Developers
32 Engaging with the Real World: Web Bluetooth and Physical Web (Chrome Dev Summit 2015)
Engaging with the Real World: Web Bluetooth and Physical Web (Chrome Dev Summit 2015)
Chrome for Developers
33 Asking for Permission: respectful, opinionated UI (Chrome Dev Summit 2015)
Asking for Permission: respectful, opinionated UI (Chrome Dev Summit 2015)
Chrome for Developers
34 Polymer - State of the Union (Chrome Dev Summit 2015)
Polymer - State of the Union (Chrome Dev Summit 2015)
Chrome for Developers
35 Building Progressive Web Apps with Polymer (Chrome Dev Summit 2015)
Building Progressive Web Apps with Polymer (Chrome Dev Summit 2015)
Chrome for Developers
36 Introduction to RAIL (Chrome Dev Summit 2015)
Introduction to RAIL (Chrome Dev Summit 2015)
Chrome for Developers
37 DevTools in 2015: Authoring to the max (Chrome Dev Summit 2015)
DevTools in 2015: Authoring to the max (Chrome Dev Summit 2015)
Chrome for Developers
38 RAIL in the real world (Chrome Dev Summit 2015)
RAIL in the real world (Chrome Dev Summit 2015)
Chrome for Developers
39 #ChromeDevSummit talks are up - W00T! -- Polycast #34
#ChromeDevSummit talks are up - W00T! -- Polycast #34
Chrome for Developers
40 V8 Performance from the Driver's Seat (Chrome Dev Summit 2015)
V8 Performance from the Driver's Seat (Chrome Dev Summit 2015)
Chrome for Developers
41 Quantify and improve real-world RAIL (Chrome Dev Summit 2015)
Quantify and improve real-world RAIL (Chrome Dev Summit 2015)
Chrome for Developers
42 Owning your performance: RAIL (Chrome Dev Summit 2015)
Owning your performance: RAIL (Chrome Dev Summit 2015)
Chrome for Developers
43 HTTP/2 101 (Chrome Dev Summit 2015)
HTTP/2 101 (Chrome Dev Summit 2015)
Chrome for Developers
44 Leadership Panel (Chrome Dev Summit 2015)
Leadership Panel (Chrome Dev Summit 2015)
Chrome for Developers
45 Build Processes, Totally Tooling Tips (S2, Ep 5)
Build Processes, Totally Tooling Tips (S2, Ep 5)
Chrome for Developers
46 Accessibility (Chrome Dev Summit 2015)
Accessibility (Chrome Dev Summit 2015)
Chrome for Developers
47 Binding to Arrays -- Polycasts #35
Binding to Arrays -- Polycasts #35
Chrome for Developers
48 HTTP2 - HTTP203
HTTP2 - HTTP203
Chrome for Developers
49 Chrome 47: Splash Screens, requestIdleCallback and better desktop notifications (New in Chrome)
Chrome 47: Splash Screens, requestIdleCallback and better desktop notifications (New in Chrome)
Chrome for Developers
50 Call For Submissions - Supercharged
Call For Submissions - Supercharged
Chrome for Developers
51 Cross Device Testing, Totally Tooling Tips (S2 Ep6)
Cross Device Testing, Totally Tooling Tips (S2 Ep6)
Chrome for Developers
52 Testing AJAX with Web Component Tester -- Polycasts #37
Testing AJAX with Web Component Tester -- Polycasts #37
Chrome for Developers
53 Slack: Extended Xmas Special - Supercharged
Slack: Extended Xmas Special - Supercharged
Chrome for Developers
54 Browser testing with Travis & Sauce Labs -- Polycasts #38
Browser testing with Travis & Sauce Labs -- Polycasts #38
Chrome for Developers
55 Optimize for production with Vulcanize -- Polycasts #39
Optimize for production with Vulcanize -- Polycasts #39
Chrome for Developers
56 Highlights from Chrome Dev Summit 2015
Highlights from Chrome Dev Summit 2015
Chrome for Developers
57 Chrome 48: Custom buttons in notifications, DevTools Security panel, and Presentation mode
Chrome 48: Custom buttons in notifications, DevTools Security panel, and Presentation mode
Chrome for Developers
58 Crisper: Protecting your Polymer app with CSP -- Polycasts #40
Crisper: Protecting your Polymer app with CSP -- Polycasts #40
Chrome for Developers
59 How do I use Sass with Polymer? #AskPolymer -- Polycasts #41
How do I use Sass with Polymer? #AskPolymer -- Polycasts #41
Chrome for Developers
60 Colors – DevTools Tonight #0 (Pilot)
Colors – DevTools Tonight #0 (Pilot)
Chrome for Developers

Related AI Lessons

When AI Asks for More Electricity Than a Country Can Imagine
AI's increasing power consumption is causing concerns, learn why it matters for data centers and energy supply
Medium · AI
You Are Not Behind. The World Is.
You're not behind, the world is still adapting to AI, and it's okay to take your time to learn and grow
Medium · AI
Career choice with the advent of AI - pure Computer Science or learn software with a background of core engineering area
Learn how to choose between a Computer Science and Engineering career path or combining programming with a core engineering background in the age of AI
Dev.to AI
The AI Hype Cycle: Calm Before the Next Breakthrough?
Understand the AI hype cycle to anticipate the next breakthrough and make informed decisions
Medium · Programming
Up next
Motorist saved by human chain | 9 News Australia
9 News Australia
Watch →