{"id":20773,"date":"2018-08-28T13:17:00","date_gmt":"2018-08-28T13:17:00","guid":{"rendered":"https:\/\/blog.jetbrains.com\/phpstorm\/?p=13178"},"modified":"2024-03-05T13:15:26","modified_gmt":"2024-03-05T12:15:26","slug":"quickstart-with-docker-in-phpstorm","status":"publish","type":"phpstorm","link":"https:\/\/blog.jetbrains.com\/zh-hans\/phpstorm\/2018\/08\/quickstart-with-docker-in-phpstorm","title":{"rendered":"Quickstart with Docker in PhpStorm"},"content":{"rendered":"<p>So, you\u2019ve decided to try something new today and started a project from scratch. Your first step will be to set up a development environment: at the bare minimum, you\u2019d want to run a web server and a PHP interpreter (preferably \u2013\u00a0with the debugging engine installed).<\/p>\n<p>With <a href=\"https:\/\/www.docker.com\/\" target=\"_blank\" rel=\"noopener\">Docker<\/a>, you can start developing, running, and debugging your code in a matter of minutes!<\/p>\n<p><iframe loading=\"lazy\" title=\"Quickstart with Docker in PhpStorm\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/bWbXMy_mxxE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p><!--more--><\/p>\n<p>Probably the easiest way to integrate Docker with PhpStorm is to use the\u00a0<a href=\"https:\/\/hub.docker.com\/r\/phpstorm\/\" target=\"_blank\" rel=\"noopener\">PhpStorm Docker registry<\/a>. It provides a selection of preconfigured Docker images curated by the PhpStorm team, which cover the most common PHP development needs.<\/p>\n<p>Before you proceed, make sure that you\u00a0have Docker installed on your machine: see how to do it <a href=\"https:\/\/docs.docker.com\/docker-for-windows\/install\/\" target=\"_blank\" rel=\"noopener\">on Windows<\/a> and <a href=\"https:\/\/docs.docker.com\/docker-for-mac\/install\/\" target=\"_blank\" rel=\"noopener\">on macOS<\/a>.<\/p>\n<h2>Define the environment<\/h2>\n<p>To get started, we create a new project in PhpStorm. Next, we create a new file named <span class=\"lang:default decode:true crayon-inline \">docker-compose.yml<\/span>\u00a0, which will describe the configuration of the services comprising our app. In our case, it will be a single <em>webserver<\/em> service:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\" data-enlighter-linenumbers=\"false\" data-enlighter-title=\"\">version: &#039;3&#039;\nservices:\n  webserver:\n    image: phpstorm\/php-apache:latest\n    ports:\n      - &quot;8080:80&quot;\n    volumes:\n      - .\/:\/var\/www\/html\n    environment:\n      XDEBUG_CONFIG: client_host=host.docker.internal<\/pre>\n<p>As you can see, we use the preconfigured Docker image comprising the Apache web server and the latest PHP version with Xdebug.<\/p>\n<p>Note that we use the <span class=\"lang:default decode:true crayon-inline\">host.docker.internal<\/span>\u00a0 value to refer to the client host. In <a href=\"https:\/\/docs.docker.com\/docker-for-windows\/networking\/\" target=\"_blank\" rel=\"noopener\">Docker for Windows<\/a> and <a href=\"https:\/\/docs.docker.com\/docker-for-mac\/networking\/\" target=\"_blank\" rel=\"noopener\">Docker for Mac<\/a>, it\u00a0automatically resolves to the internal address of the host, letting you easily connect to it from the container.<\/p>\n<p>An important note for Linux users: <span class=\"lang:default decode:true crayon-inline\">host.docker.internal<\/span>\u00a0 on Linux is currently <a href=\"https:\/\/github.com\/docker\/for-linux\/issues\/264\" target=\"_blank\" rel=\"noopener\">not supported<\/a>. You&#8217;ll have to use\u00a0your\u00a0local machine&#8217;s hostname instead (to find out\u00a0what your machine&#8217;s hostname is, simply execute <span class=\"lang:default decode:true crayon-inline \">hostname<\/span>\u00a0 in Terminal).<\/p>\n<p>The corresponding environment configuration section for Linux\u00a0will read as\u00a0follows:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\" data-enlighter-linenumbers=\"false\" data-enlighter-title=\"\">   ...\n    environment:\n      XDEBUG_CONFIG: client_host=&lt;hostname&gt;<\/pre>\n<p>See <a href=\"https:\/\/github.com\/docker\/for-linux\/issues\/264\" target=\"_blank\" rel=\"noopener\">here<\/a> for more details and possible workarounds.<\/p>\n<p>Our environment is fully described:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-452041\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/08\/phpstorm-docker-compose-updated-1.png\" alt=\"\" width=\"660\" height=\"284\" \/><\/p>\n<p>We can now start using it\u00a0by\u00a0creating a dedicated run\/debug configuration.<\/p>\n<h2>Run docker-compose.yaml<\/h2>\n<p>Run the configuration by clicking the <em>Run<\/em> button in the gutter or from the toolbar:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-452085\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/08\/run_docker_compose_from_gutter_or_toolbar-1.png\" alt=\"\" width=\"660\" height=\"176\" \/><\/p>\n<p>PhpStorm will automatically download the required image and start the web server:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-452096 size-full\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/08\/docker_start_service.png\" alt=\"\" width=\"1884\" height=\"604\" \/><\/p>\n<p>That\u2019s it: we\u2019ve got everything ready for running and debugging our code!<\/p>\n<h2>Running and debugging code<\/h2>\n<p>Let\u2019s ensure that everything works as expected. To do this, we\u2019ll create the most simple <em>Hello world<\/em> PHP file and try to debug it following the <a href=\"https:\/\/www.jetbrains.com\/help\/phpstorm\/zero-configuration-debugging.html\" target=\"_blank\" rel=\"noopener\">PhpStorm Zero-Configuration Debugging<\/a> approach.<\/p>\n<p>Since we already have Xdebug installed and configured, this will only require that you:<\/p>\n<ul>\n<li>Have a <a href=\"https:\/\/www.jetbrains.com\/help\/phpstorm\/browser-debugging-extensions.html\" target=\"_blank\" rel=\"noopener\">debugging extension<\/a> installed and enabled for your browser:<img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-452118\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/08\/chrome_debug_extension_new-1.png\" alt=\"\" width=\"660\" height=\"225\" \/><\/li>\n<li>Set a breakpoint in your code:<br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-452129\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/08\/breakpoint_set_updated.png\" alt=\"\" width=\"660\" height=\"194\" \/><\/li>\n<li>Enable listening to incoming debug connections in PhpStorm:<img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-452140\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/08\/enable_listening_upd.png\" alt=\"\" width=\"322\" height=\"37\" \/><\/li>\n<\/ul>\n<p>Now, open the page in the browser, and the debugging session will be started automatically:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-453049\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/08\/docker-xdebug-demo-1.png\" alt=\"\" width=\"1040\" height=\"574\" \/><\/p>\n<p>We encourage you to further explore the <a href=\"https:\/\/hub.docker.com\/u\/phpstorm\/\" target=\"_blank\" rel=\"noopener\">PhpStorm Docker registry<\/a>: while we\u2019ve looked at a very simple case, you can use the described technique to provide your environment with, for example, a database, or an sftp server.<br \/>\nUsing these Docker images will save you a lot of effort and let you start coding in a matter of a minute, or even less!<\/p>\n<p>If you\u2019d like to learn more about Docker and how to use it in PhpStorm, make sure to check out the <a href=\"https:\/\/www.pascallandau.com\/blog\/php-php-fpm-and-nginx-on-docker-in-windows-10\/\" target=\"_blank\" rel=\"noopener\">excellent tutorial series<\/a> by <a href=\"https:\/\/www.pascallandau.com\/about\/\" target=\"_blank\" rel=\"noopener\">Pascal Landau<\/a>, and <a href=\"https:\/\/www.jetbrains.com\/help\/phpstorm\/docker.html\" target=\"_blank\" rel=\"noopener\">PhpStorm documentation<\/a>, of course.<\/p>\n<p><em>Your JetBrains PhpStorm Team<\/em><br \/>\n<em>The Drive to Develop<\/em><\/p>\n","protected":false},"author":745,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","categories":[808,907,2347],"tags":[632,263,743,91,1116],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/phpstorm\/20773"}],"collection":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/phpstorm"}],"about":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/types\/phpstorm"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/users\/745"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/comments?post=20773"}],"version-history":[{"count":9,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/phpstorm\/20773\/revisions"}],"predecessor-version":[{"id":453069,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/phpstorm\/20773\/revisions\/453069"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/media?parent=20773"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/categories?post=20773"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/tags?post=20773"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/cross-post-tag?post=20773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}