title: Runing vue/cli app under docker simple index.html is opened
body: <p>I want to install my @vue/cli 4.0.5 app under docker and I found this package
  <a href="https://hub.docker.com/r/ebiven/vue-cli" rel="nofollow noreferrer">https://hub.docker.com/r/ebiven/vue-cli</a>
  Supposing that is what I need (?) I modified _Docker/docker-compose.yml with</p>
  
  <pre><code>web:
      container_name: vtasks_web
  
      build:
          context: ./web
          dockerfile: Dockerfile.yml
  
      environment:
          - APACHE_RUN_USER=www-data
      volumes:
          - ${APP_PATH_HOST}:${APP_PTH_CONTAINER}
      ports:
          - 8088:80
      working_dir: ${APP_PTH_CONTAINER}
  
  ...
  
  vue_cli:
      container_name: vtasks_vue_cli
      image: ebiven/vue-cli:latest
      volumes:
          - ${APP_PATH_HOST}:${APP_PTH_CONTAINER}
      working_dir: ${APP_PTH_CONTAINER}
      command: npm install
  </code></pre>
  
  <p>Building the app and next checking logs I do not have errors, also node_modules was created(I removed it priorly):</p>
  
  <p>But entering the bush I run </p>
  
  <pre><code>npm run serve
  </code></pre>
  
  <p>command  and it shows :</p>
  
  <pre><code>ONE  Compiled successfully in 10065ms                                                                                                                                                                                            4:21:52 PM
  
  
    App running at:
    - Local:   http://localhost:8080/ 
  
    It seems you are running Vue CLI inside a container.
    Access the dev server via http://localhost:&lt;your container's external mapped port&gt;/
  
    Note that the development build is not optimized.
    To create a production build, run npm run build.
  </code></pre>
  
  <p>So I run</p>
  
  <pre><code>http://localhost:8088/
  </code></pre>
  
  <p>as in container of web I have 8088:80 set
  But in browser I see that index.html  is opened(by title and page content) but not js rendered?</p>
  
  <p>What is valid way ?</p>
  
  <p><strong>MODIFIED BLOCK :</strong>
  Looking at demo at <a href="https://github.com/ebiven/docker-vue-cli" rel="nofollow noreferrer">https://github.com/ebiven/docker-vue-cli</a> I see that 
  ebiven/docker-vue-cli is used as web container, so removing node_modules directory and I remade my _Docker/docker-compose.yml :</p>
  
  <pre><code>version: '3.5'
  
  services:
  
  
  
      web:
          container_name: vtasks_web
  
          image: ebiven/vue-cli
  
          command: npm install
  #        command: npm install ; npm run serve  // I GOT ERROR HERE
  #        command: npm run serve
  
          build:
              context: ./web
              dockerfile: Dockerfile.yml
  
          environment:
              - APACHE_RUN_USER=www-data
  
          volumes:
              - ${APP_PATH_HOST}:${APP_PTH_CONTAINER}
          ports:
              - "8088:80"
  
          working_dir: ${APP_PTH_CONTAINER}
  
  
      db:
          container_name: vtasks_db
          image: mysql:5.7.28
          restart: always
          environment:
              - MYSQL_DATABASE=DockerVTasks
              - MYSQL_USER=docker_user
              - MYSQL_PASSWORD=4321
              - MYSQL_ALLOW_EMPTY_PASSWORD=false
              - MYSQL_ROOT_PASSWORD=321
              - TZ=Europe/Kiev
  
          volumes:
              - ${DB_PATH_HOST}:/var/lib/mysql
  
  
      adminer:
        container_name: vtasks_adminer
        image: adminer
        restart: always
        ports:
          - 8089:8080
        links:
          - db
  </code></pre>
  
  <p>as result I see :</p>
  
  <pre><code>$ docker-compose up -d --build     
  Building web
  Step 1/6 : FROM php:7.3-apache
   ---&gt; 5af347316d4b
  Step 2/6 : RUN apt-get update &amp;&amp;     apt-get install -y     python     libfreetype6-dev     libwebp-dev     libjpeg62-turbo-dev     libpng-dev     libzip-dev     nano     mc     git-core     curl     build-essential     openssl     libssl-dev     libgmp-dev     libldap2-dev     netcat     locate     &amp;&amp; git clone https://github.com/nodejs/node.git     &amp;&amp; cd node     &amp;&amp; git checkout v12.0.0     &amp;&amp; ./configure      &amp;&amp; make      &amp;&amp; make install
   ---&gt; Using cache
   ---&gt; b56b2543f6bd
  Step 3/6 : RUN npm install cross-env
   ---&gt; Using cache
   ---&gt; f8abda742c47
  Step 4/6 : RUN  docker-php-ext-configure gd --with-freetype-dir=/usr/include/ --with-webp-dir=/usr/include/  --with-jpeg-dir=/usr/include/
   ---&gt; Using cache
   ---&gt; df0636ba5b86
  Step 5/6 : RUN  docker-php-ext-install gd pdo pdo_mysql zip gmp bcmath pcntl ldap sysvmsg exif &amp;&amp; a2enmod rewrite
   ---&gt; Using cache
   ---&gt; 307c9f243f02
  Step 6/6 : COPY virtualhost.conf /etc/apache2/sites-enabled/000-default.conf
   ---&gt; Using cache
   ---&gt; 3c733883faaa
  
  Successfully built 3c733883faaa
  Successfully tagged ebiven/vue-cli:latest
  Recreating vtasks_web ... 
  vtasks_db is up-to-date
  Recreating vtasks_web
  Recreating vtasks_web ... done
  serge@athoe:/mnt/_work_sdb8/wwwroot/lar/VApps/vtasks/_Docker$ docker logs --tail=40  vtasks_web
  
  &gt; node-sass@4.13.0 install /var/www/vtasks_docker_root/node_modules/node-sass
  &gt; node scripts/install.js
  
  Downloading binary from https://github.com/sass/node-sass/releases/download/v4.13.0/linux-x64-72_binding.node
  Download complete
  Binary saved to /var/www/vtasks_docker_root/node_modules/node-sass/vendor/linux-x64-72/binding.node
  Caching binary to /root/.npm/node-sass/4.13.0/linux-x64-72_binding.node
  
  &gt; core-js@3.6.1 postinstall /var/www/vtasks_docker_root/node_modules/core-js
  &gt; node -e "try{require('./postinstall')}catch(e){}"
  
  Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
  
  The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
  &gt; https://opencollective.com/core-js 
  &gt; https://www.patreon.com/zloirock 
  
  Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
  
  
  &gt; ejs@2.7.4 postinstall /var/www/vtasks_docker_root/node_modules/ejs
  &gt; node ./postinstall.js
  
  Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)
  
  
  &gt; node-sass@4.13.0 postinstall /var/www/vtasks_docker_root/node_modules/node-sass
  &gt; node scripts/build.js
  
  Binary found at /var/www/vtasks_docker_root/node_modules/node-sass/vendor/linux-x64-72/binding.node
  Testing binary
  Binary is fine
  npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules/fsevents):
  npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
  
  added 1239 packages from 876 contributors and audited 19413 packages in 26.747s
  found 0 vulnerabilities
  </code></pre>
  
  <p>I see node_modules directory is generated, but also I need to run</p>
  
  <pre><code>npm run serve
  </code></pre>
  
  <p>after </p>
  
  <pre><code>npm install
  </code></pre>
  
  <p><strong>MODIFIED BLOCK # 2 :</strong></p>
  
  <p>Modified command as </p>
  
  <pre><code>command: bash -c "npm install &amp;&amp; npm run serve"
  </code></pre>
  
  <p>I have got next output without errors:</p>
  
  <pre><code>$ docker logs --tail=20  vtasks_web
  &lt;s&gt; [webpack.Progress] 93% after chunk asset optimization
  &lt;s&gt; [webpack.Progress] 93% asset optimization
  &lt;s&gt; [webpack.Progress] 94% after asset optimization
  &lt;s&gt; [webpack.Progress] 94% after seal
  &lt;s&gt; [webpack.Progress] 95% emitting
  &lt;s&gt; [webpack.Progress] 95% emitting HtmlWebpackPlugin
  &lt;s&gt; [webpack.Progress] 95% emitting CopyPlugin
  &lt;s&gt; [webpack.Progress] 98% after emitting
  &lt;s&gt; [webpack.Progress] 98% after emitting CopyPlugin
   DONE  Compiled successfully in 10316ms4:36:18 AM
  
  &lt;s&gt; [webpack.Progress] 100% 
  
  
    App running at:
    - Local:   http://localhost:8080/ 
  
    It seems you are running Vue CLI inside a container.
    Access the dev server via http://localhost:&lt;your container's external mapped port&gt;/
  </code></pre>
  
  <p>But which url have I to run ?
  On </p>
  
  <pre><code> http://localhost:8080/
  </code></pre>
  
  <p>I got error :</p>
  
  <pre><code> This site can’t be reachedlocalhost 
   refused to connect.
  </code></pre>
  
  <p>I tried to set some code for format :
  but I am not sure what they call :</p>
  
  <blockquote>
    <p>your container's external mapped port</p>
  </blockquote>
  
  <p>?</p>
  
  <p>But which syntax have I to use?</p>
  
  <p><strong>MODIFIED BLOCK  # 3</strong></p>
  
  <p>Running </p>
  
  <pre><code>http://localhost:8080/ 
  </code></pre>
  
  <p>at my browser I got eror :</p>
  
  <pre><code>This site can’t be reached
  localhost refused to connect.
  
  
  Checking logs I see : $ docker logs --tail=40 vtasks_web
  &lt;s&gt; [webpack.Progress] 87% after chunk id optimization
  &lt;s&gt; [webpack.Progress] 87% record modules
  &lt;s&gt; [webpack.Progress] 87% record modules RecordIdsPlugin
  &lt;s&gt; [webpack.Progress] 87% record chunks
  &lt;s&gt; [webpack.Progress] 87% record chunks RecordIdsPlugin
  &lt;s&gt; [webpack.Progress] 88% hashing
  &lt;s&gt; [webpack.Progress] 88% after hashing
  &lt;s&gt; [webpack.Progress] 88% after hashing HotModuleReplacementPlugin
  &lt;s&gt; [webpack.Progress] 89% record hash
  &lt;s&gt; [webpack.Progress] 89% module assets processing
  &lt;s&gt; [webpack.Progress] 90% chunk assets processing
  &lt;s&gt; [webpack.Progress] 90% additional chunk assets processing
  &lt;s&gt; [webpack.Progress] 90% additional chunk assets processing HotModuleReplacementPlugin
  &lt;s&gt; [webpack.Progress] 91% recording
  &lt;s&gt; [webpack.Progress] 91% recording HotModuleReplacementPlugin
  &lt;s&gt; [webpack.Progress] 92% additional asset processing
  &lt;s&gt; [webpack.Progress] 92% chunk asset optimization
  &lt;s&gt; [webpack.Progress] 93% after chunk asset optimization
  &lt;s&gt; [webpack.Progress] 93% asset optimization
  &lt;s&gt; [webpack.Progress] 94% after asset optimization
  &lt;s&gt; [webpack.Progress] 94% after seal
  &lt;s&gt; [webpack.Progress] 95% emitting
  &lt;s&gt; [webpack.Progress] 95% emitting HtmlWebpackPlugin
  &lt;s&gt; [webpack.Progress] 95% emitting CopyPlugin
  &lt;s&gt; [webpack.Progress] 98% after emitting
  &lt;s&gt; [webpack.Progress] 98% after emitting CopyPlugin
   DONE  Compiled successfully in 11638ms12:10:15 PM
  
  &lt;s&gt; [webpack.Progress] 100% 
  
  
    App running at:
    - Local:   http://localhost:8080/ 
  
    It seems you are running Vue CLI inside a container.
    Access the dev server via http://localhost:&lt;your container's external mapped port&gt;/
  
    Note that the development build is not optimized.
    To create a production build, run npm run build.
  </code></pre>
  
  <p>But in my _Docker/docker-compose.yml I have options :</p>
  
  <pre><code>ports:
      - "8088:80"
  </code></pre>
  
  <p>Actually I have several docker projects, like :</p>
  
  <pre><code>$ docker ps                                                                                                                                                
  CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS                          PORTS                    NAMES                                                                    
  99bc972f0840        ebiven/vue-cli      "docker-php-entrypoi"   32 hours ago        Up 8 minutes                    0.0.0.0:8088-&gt;80/tcp     vtasks_web                                                             
  fcb6d879effa        adminer             "entrypoint.sh docke"   2 weeks ago         Up 8 minutes                    0.0.0.0:8089-&gt;8080/tcp   vtasks_adminer                                                         
  b0b81c6587bb        mysql:5.7.28        "docker-entrypoint.s"   2 weeks ago         Restarting (1) 47 seconds ago                            vtasks_db       
  </code></pre>
  
  <p>The issue with ports is confusing... </p>
  
  <p>Thanks!</p>