From ad42e88ae4d411bda0b5cd4923b23d7e8abe1ab4 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Mon, 19 Jun 2023 00:48:10 +0800
Subject: [PATCH] Added docker/podman compose

---
 backend/docker-compose.yml    | 37 +++++++++++++++++++++++++
 backend/docker/Dockerfile     | 27 +++++++++++++++++++
 backend/docker/mysqld.conf    | 12 +++++++++
 frontend/composables/axios.ts |  4 +--
 frontend/pages/index.vue      | 51 ++++++++++++++++-------------------
 5 files changed, 101 insertions(+), 30 deletions(-)
 create mode 100644 backend/docker-compose.yml
 create mode 100644 backend/docker/Dockerfile
 create mode 100644 backend/docker/mysqld.conf

diff --git a/backend/docker-compose.yml b/backend/docker-compose.yml
new file mode 100644
index 0000000..0f192a4
--- /dev/null
+++ b/backend/docker-compose.yml
@@ -0,0 +1,37 @@
+version: 3.4
+services:
+    web:
+        container_name: twitter_clone_laravel
+        build:
+            context: ./docker
+            dockerfile: Dockerfile
+        depends_on:
+            - twitter_clone_mysql
+        volumes:
+            - .:/var/www/html:Z
+        ports:
+            - 8080:8080
+        networks:
+            - sail
+        depends_on:
+            - mysql
+    mysql:
+        container_name: twitter_clone_mysql
+        image: mysql
+        restart: always
+        environment:
+            MYSQL_DATABASE: twitter
+            MYSQL_ALLOW_EMPTY_PASSWORD: 1
+        ports:
+            - 3306:3306
+        volumes:
+            - dbdata:/var/lib/mysql
+            - ./docker/mysqld.conf:/etc/mysql/my.cnf
+        networks:
+            - sail
+networks:
+  sail:
+    driver: bridge
+volumes:
+    dbdata:
+      driver: local
diff --git a/backend/docker/Dockerfile b/backend/docker/Dockerfile
new file mode 100644
index 0000000..6952415
--- /dev/null
+++ b/backend/docker/Dockerfile
@@ -0,0 +1,27 @@
+FROM ubuntu:22.04
+
+WORKDIR /var/www/html
+
+ENV DEBIAN_FRONTEND noninteractive
+ENV TZ=UTC
+
+RUN apt-get update \
+    && apt-get install -y gnupg curl ca-certificates zip unzip git libcap2-bin libpng-dev python2 dnsutils librsvg2-bin \
+    && curl -sS 'https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x14aa40ec0831756756d7f66c4f4ea0aae5267a6c' | gpg --dearmor | tee /etc/apt/keyrings/ppa_ondrej_php.gpg > /dev/null \
+    && echo "deb [signed-by=/etc/apt/keyrings/ppa_ondrej_php.gpg] https://ppa.launchpadcontent.net/ondrej/php/ubuntu jammy main" > /etc/apt/sources.list.d/ppa_ondrej_php.list \
+    && apt-get update \
+    && apt-get install -y php8.2-cli php8.2-dev \
+       php8.2-gd php8.2-imagick \
+       php8.2-curl \
+       php8.2-imap php8.2-mysql php8.2-mbstring \
+       php8.2-xml php8.2-zip php8.2-bcmath php8.2-soap \
+       php8.2-intl php8.2-readline \
+       php8.2-ldap \
+       php8.2-msgpack php8.2-igbinary php8.2-redis php8.2-swoole \
+       php8.2-memcached php8.2-pcov php8.2-xdebug \
+    && curl -sLS https://getcomposer.org/installer | php -- --install-dir=/usr/bin/ --filename=composer
+
+EXPOSE 8080
+
+CMD ["php", "artisan", "serve", "--host=0.0.0.0", "--port=8080"]
+
diff --git a/backend/docker/mysqld.conf b/backend/docker/mysqld.conf
new file mode 100644
index 0000000..8a6f810
--- /dev/null
+++ b/backend/docker/mysqld.conf
@@ -0,0 +1,12 @@
+[mysqld]
+pid-file	            = /var/run/mysqld/mysqld.pid
+socket		            = /var/run/mysqld/mysqld.sock
+# Where the database files are stored inside the container
+datadir		            = /var/lib/mysql
+
+# My application special configuration
+max_allowed_packet          = 32M
+sql-mode                    = 'STRICT_TRANS_TABLES,NO_ENGINE_SUBSTITUTION'
+
+# Accept connections from any IP address
+bind-address	            = 0.0.0.0
diff --git a/frontend/composables/axios.ts b/frontend/composables/axios.ts
index 68603b0..9b997d3 100644
--- a/frontend/composables/axios.ts
+++ b/frontend/composables/axios.ts
@@ -1,8 +1,8 @@
 import axios from 'axios'
 
 const request = axios.create({
-	baseURL: 'http://localhost:8000',
-	withCredentials: true,
+    baseURL: 'http://localhost:8080',
+    withCredentials: true,
 })
 
 export { request }
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 8614f05..fc1d5fd 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 definePageMeta({
-	middleware: ['auth'],
+    middleware: ['auth'],
 })
 
 import { z } from 'zod'
@@ -10,45 +10,40 @@ const posts = ref<Posts>([])
 const lastPost = ref<Number>(0)
 
 const responseValidator = z.object({
-	status: z.number(),
-	data: z.unknown().array(),
+    status: z.number(),
+    data: z.unknown().array(),
 })
 
 const getPosts = async () => {
-	const data = await request.get('http://localhost:8000/api/posts', {
-		params: { lastPost: lastPost.value },
-	})
+    const data = await request.get('/api/posts', {
+        params: { lastPost: lastPost.value },
+    })
 
-	console.log(data)
+    console.log(data)
 
-	const response = responseValidator.safeParse(data.data)
-	// console.log(parsePosts(response.data))
+    const response = responseValidator.safeParse(data.data)
 
-	if (!response.success) return
+    if (!response.success) return
 
-	posts.value = [...posts.value, ...parsePosts(response.data.data)]
-	lastPost.value = posts.value[posts.value.length - 1].sequence
+    posts.value = [...posts.value, ...parsePosts(response.data.data)]
+    lastPost.value = posts.value[posts.value.length - 1].sequence
 }
 
 onMounted(() => {
-	getPosts()
+    getPosts()
 })
 </script>
 
 <template>
-	<div>
-		<!-- {{ posts }} -->
-		<div class="flex w-full items-center justify-center">
-			<div class="flex w-1/2 flex-col gap-4 px-4 pb-10 pt-2 2xl:w-1/3">
-				<div
-					v-if="posts"
-					v-for="post in posts">
-					<PostCard
-						:title="post.title"
-						:description="post.description" />
-				</div>
-				<button @click="getPosts()">More {{ lastPost }}</button>
-			</div>
-		</div>
-	</div>
+    <div>
+        <!-- {{ posts }} -->
+        <div class="flex w-full items-center justify-center">
+            <div class="flex w-1/2 flex-col gap-4 px-4 pb-10 pt-2 2xl:w-1/3">
+                <div v-if="posts" v-for="post in posts">
+                    <PostCard :title="post.title" :description="post.description" />
+                </div>
+                <button @click="getPosts()">More {{ lastPost }}</button>
+            </div>
+        </div>
+    </div>
 </template>