Wordpress on docker compose doesn't load css - wordpress

Question

I'm new to docker and databases but my first project on local host doesn't load as expected. The side appears but the content is scattered. Here is the .yml file
version: "3.9"
services:
db:
image: mysql:5.7
volumes:
- db_data:/var/lib/mysql
restart: always
environment:
MYSQL_ROOT_PASSWORD: somewordpress
MYSQL_DATABASE: wordpress
MYSQL_USER: wordpress
MYSQL_PASSWORD: wordpress
wordpress:
depends_on:
- db
image: wordpress:latest
volumes:
- ./www:/var/www/html
ports:
- "80:80"
restart: always
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_USER: wordpress
WORDPRESS_DB_PASSWORD: wordpress
WORDPRESS_DB_NAME: wordpress
volumes:
db_data: {}

Answer 1

Every time you run
$ docker-compose up
Docker create a new network to which all the containers in your compose file will be connected to.
In the first run of this compose file, you do the installation of Wordpress,
and Wordpress insert the IP address of your web site in the database.
The problem occur when you stop this compose file with:
$ docker-compose down
the network created with "docker-compose up" is removed
and when you run the compose file again, docker will create a new network with different IP addresses, so links become broken because your webpages still point to the old IP address.
A solution can be to create a network outside compose file with:
$ docker network create my_network
and empty the volume "dbdata" and the folder "./www" (and lose all your data) then update your compose file with:
version: "3.9"
services:
db:
image: mysql:5.7
volumes:
- db_data:/var/lib/mysql
restart: always
environment:
MYSQL_ROOT_PASSWORD: somewordpress
MYSQL_DATABASE: wordpress
MYSQL_USER: wordpress
MYSQL_PASSWORD: wordpress
wordpress:
depends_on:
- db
image: wordpress:latest
volumes:
- ./www:/var/www/html
ports:
- "80:80"
restart: always
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_USER: wordpress
WORDPRESS_DB_PASSWORD: wordpress
WORDPRESS_DB_NAME: wordpress
volumes:
db_data: {}
networks:
default:
external:
name: my_network
I think there is solution to this problem without losing your data, for more information you can read this article.