{"id":402,"date":"2024-07-21T03:03:36","date_gmt":"2024-07-21T10:03:36","guid":{"rendered":"https:\/\/kdcinfo.com\/blog\/?p=402"},"modified":"2024-07-21T03:03:40","modified_gmt":"2024-07-21T10:03:40","slug":"preliminary-adventures-in-ci-cd-with-flutter","status":"publish","type":"post","link":"https:\/\/kdcinfo.com\/blog\/2024\/07\/21\/preliminary-adventures-in-ci-cd-with-flutter\/","title":{"rendered":"Preliminary Adventures in CI\/CD with Flutter"},"content":{"rendered":"\n

In an effort to become a more well-rounded and full(er) stack developer, the time has come for me to embark on a path to understanding the world of CI\/CD within the realm of Flutter development.<\/p>\n\n\n\n

I had, admittedly, put off learning CI\/CD because, while I looked forward to automating the development and deployment processes, immersing myself into the depths of such tangled tech was a tad intimidating for a greenish mobile dev. So I opted to procrastinate by spending a year refactoring two of my apps from Provider<\/a> to Bloc<\/a>, then creating a fully functional practical prototype<\/a>. <\/p>\n\n\n\n

Procrastination complete . . .<\/p>\n\n\n\n

\n

The time has come to learn CI\/CD.<\/em><\/strong><\/p>\n\n\n\n

\"Learning<\/p>\n<\/blockquote>\n\n\n\n

Initial research revealed I had to look at CI\/CD from two perspectives: <\/p>\n\n\n\n

    \n
  1. setting up development environments<\/strong>, and <\/li>\n\n\n\n
  2. setting up deployment flows<\/strong>.<\/li>\n<\/ol>\n\n\n\n

    Initial observations also lead me to conclude:<\/p>\n\n\n\n

      \n
    1. I finally get a practical opportunity to learn Docker<\/strong>. \ud83d\udc4f<\/li>\n\n\n\n
    2. As imagined, there is no shortage of deployment approaches and tools<\/strong> to choose from.<\/li>\n<\/ol>\n\n\n\n

      I next realized I had to determine which of my four Flutter apps would fall into which CI\/CD tool or tech approach. There is one open source app<\/strong> in the ‘Dev Play’ repository<\/a>, and there are three private apps<\/strong> related to KD-reCall<\/a>, which is a small suite of simple reminder apps available in both app stores. Here’s the breakdown I ended up with.<\/p>\n\n\n\n

        \n
      1. Dev Play Flutter app<\/strong>: Open source => Deployment<\/code> [web]<\/li>\n\n\n\n
      2. KD-reCall Flutter apps<\/strong>: Private => Deployment<\/code> [android, ios]<\/li>\n\n\n\n
      3. KD-reCall APIs<\/strong>: Private => Development<\/code> via Docker<\/li>\n<\/ol>\n\n\n\n

        Development with Docker<\/h2>\n\n\n\n

        I spent some time setting up a development image for API development, but have yet to try it out as I got busy setting up my first deployment flow. I trust I should have no issues with the development environment image as it really is just a modularized Virtual Machine (like VirtualBox<\/a>), and I’m already familiar with shelling into servers thanks to web hosting. <\/p>\n\n\n\n

        Although I know it’s been around forever, it was still great to see so many Docker images supporting so many environments and tools. For instance, having a MariaDB image in lieu of MySQL.<\/p>\n\n\n\n

        Draft Docker Image: Custom LAMP Development (untested)<\/summary>\n
        # Mac: docker-compose\n\n## > $ cd ~\/Development\/dev-play\/tic-tac-tuple\/\n\n## > vi docker-compose.yml\n\n```yaml\nversion: '3.1'\nservices:\n    web:\n        image: nginx:latest\n        ports:\n            - \"8080:80\"\n            - \"443:443\"\n        environment:\n            - NGINX_HOST=kdcinfo.com\n            - NGINX_PORT=80\n        volumes:\n            - .\/nginx.conf:\/etc\/nginx\/conf.d\/nginx.conf # default.conf\n            - .\/docker\/nginx\/default.conf:\/etc\/nginx\/conf.d\/default.conf\n            - .:\/var\/www\/html # Web: kdcinfo\n    php:\n        # image: php:fpm\n        build:\n            context: .\n            dockerfile: PHP.Dockerfile\n        volumes:\n            - .:\/var\/www\/html\n    database:\n        # image: mariadb:latest\n        build:\n            dockerfile: docker\/database\/Dockerfile\n        ports:\n            - \"3306:3306\" # 3306:3306\n        environment:\n            #\n            # MYSQL_ROOT_PASSWORD: 'deepsecret'\n            # MYSQL_DATABASE: 'tutorialdb'\n            # MYSQL_USER: 'tutorial'\n            # MYSQL_PASSWORD: 'goodsecret'\n            MARIADB_ROOT_PASSWORD: 'deepsecret'\n            MARIADB_DATABASE: 'tutorialdb'\n            MARIADB_USER: 'tutorial'\n            MARIADB_PASSWORD: 'goodsecret'\n        volumes:\n            - database_data:\/var\/lib\/mysql\nvolumes:\n    # mysqldata: {}\n    database_data:\n        driver: local\n```\n\n- The `nginx.conf` file from the host is placed at `\/etc\/nginx\/conf.d\/nginx.conf` inside the container.\n- The `app` folder is created at the root of the container in `\/app`; place PHP scripts, images and JavaScript files.\n\n> vi nginx.conf\n\n```yaml\nserver {\n    listen 80 default_server;\n    # root \/app\/public;\n    root \/app\/web;\n\n    index index.php index.html index.htm;\n\n    location ~ \\.php$ {\n        fastcgi_pass php:9000;\n        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;\n        include fastcgi_params;\n    }\n}\n```\n\n> vi PHP.Dockerfile\n\n```yaml\nFROM php:fpm # php:8.2-fpm\n\nRUN docker-php-ext-install pdo pdo_mysql\n\nRUN pecl install xdebug && docker-php-ext-enable xdebug\n```\n\n- `xdebug` is installed through `pecl`, which is provided as part of the official PHP image.\n- Rebuild the image with `docker-compose build`,\n-   then restart the server with `docker-compose up`. The output of `phpinfo()` should show that both `pdo_mysql` and `xdebug` are installed.\n\n> vi index.php => <?php \\r phpinfo();\n\n> docker-compose build # Rebuild the image\n\n> docker-compose up\n> ctrl-c\n\n> vi sqltest.php\n\n```php\n<?php\n$pdo = new PDO('mysql:dbname=tutorialdb;host=mysql', 'tutorial', 'goodsecret', [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]);\n\n$query = $pdo->query('SHOW VARIABLES like \"version\"');\n\n$row = $query->fetch();\n\necho 'MySQL version:' . $row['Value'];\n```\n\n> $ docker compose up -d<\/code><\/pre>\n<\/details>\n\n\n\n
        Deployment Flows<\/h2>\n\n\n\n
        On the deployment side, I found I had some decisions to make.<\/p>\n\n\n\n
        After perusing a dozen or so CI\/CD deployment approaches, and knowing I can’t learn everything at once, I trimmed the tech list I was looking to learn down to:<\/p>\n\n\n\n