如何在VS Code中编辑Docker容器内的PrestaShop代码？

Standalone Docker Setup (Fix Code Editing & Remote Containers Access) #

Your initial setup lacked a local volume mount to sync PrestaShop's code between your machine and the container—this is why you couldn't edit files in VS Code. Follow these adjusted steps:

1. Create a local directory for PrestaShop code

   mkdir ~/prestashop-code
   

2. Recreate the network (if not already exists)

   docker network create prestashop-net
   

3. Launch MySQL container (same as before)

   docker run -d --name some-mysql --network prestashop-net -e MYSQL_ROOT_PASSWORD=admin -p 3307:3306 mysql:5.7
   

4. Launch PrestaShop container with volume mount
   The -v flag maps your local code directory to the container's /var/www/html (where PrestaShop stores its source files):

   docker run -d --name some-prestashop --network prestashop-net -e DB_SERVER=some-mysql -p 8080:80 -v ~/prestashop-code:/var/www/html prestashop/prestashop
   

5. Access code in VS Code

   • Option 1: Open the local ~/prestashop-code directory directly in VS Code—any edits will sync to the container automatically.
   • Option 2: Use Remote Containers plugin:
     1. Open VS Code's Remote Containers extension.
     2. Under the "Containers" list, find some-prestashop (refresh the list if it doesn't appear).
     3. Click "Attach to Container" to open the container's filesystem in VS Code for direct editing.

Docker Compose Setup (Fix Port Access & Code Editing) #

If your docker-compose setup had port issues, use this working configuration to ensure proper service linking, port mapping, and code sync:

1. Create a project directory and add docker-compose.yml

   version: '3.8'
   
   services:
     mysql:
       image: mysql:5.7
       container_name: prestashop-mysql
       networks:
         - prestashop-net
       environment:
         MYSQL_ROOT_PASSWORD: admin
         MYSQL_DATABASE: prestashop
         MYSQL_USER: prestashop
         MYSQL_PASSWORD: prestashop
       volumes:
         - mysql-data:/var/lib/mysql
   
     prestashop:
       image: prestashop/prestashop
       container_name: prestashop-app
       networks:
         - prestashop-net
       environment:
         DB_SERVER: mysql
         DB_USER: prestashop
         DB_PASSWORD: prestashop
         DB_NAME: prestashop
       ports:
         - "8001:80"
       volumes:
         - ./prestashop-code:/var/www/html
       depends_on:
         - mysql
   
   volumes:
     mysql-data:
   
   networks:
     prestashop-net:
   

2. Start the services

   docker-compose up -d
   

3. Verify access
   Wait 2-3 minutes for the container to initialize, then visit http://localhost:8001—the site should load.

4. Fix permission issues (if needed)
   If you can't edit local files or the site throws errors, set correct ownership for the code directory:

   sudo chown -R $USER:$USER ./prestashop-code
   

5. Edit code in VS Code
   Use the same methods as the standalone setup: open the local prestashop-code directory or attach to the prestashop-app container via Remote Containers.

内容的提问来源于stack exchange，提问作者wtsuport