<script setup lang="ts">
</script>
<template> 
 

<div class="col-12 row justify-center text-h6 text-dark">ดูแลรักษาระบบ</div>
    <div class="col-12 q-pt-md "></div>
	<div class="col-12"><q-separator color="grey-4" /></div>




    

    <div class="q-pa-md col-12 text-weight-medium"
    style="
    padding-left: 0px;
    padding-right: 0px;
">



<div class="q-pa-md col-12 text-weight-medium"
                style="
                padding-left: 0px;
                padding-right: 0px;
                padding-top: 0px;
            ">
                <q-expansion-item
                class="shadow-1 overflow-hidden"
                style="border-radius: 8px"
                label="Build and Deploy Document"
                header-class="bg-secondary text-white "
                expand-icon-class="text-white"
                
                >
                    <div class="col-12 text-weight-medium">                   
                    </div>
                        <q-expansion-item class="text-weight-medium bg-grey-4"
                        
                    expand-separator
                    label="TEST Environment"
                    >

                    <q-card>
                    <q-card-section>
                        <div style="margin-bottom: 10px;">
                            1. เมื่อพบว่า server มีการตอบสนองช้าลง ซึ่งอาจจะเป็นได้จากการที่ RAM ของ Server ไม่พอ หรือมีการใช้งาน Memory ผิดปกติ สามารถเข้าไปตรวจสอบได้ที่ Grafana Dashboard 
                      
                        <q-card  class="card1 text-weight-regular" style="margin-top: 10px;" >
                            
                                <ul>
                                    <li>
                                        ระบบที่มีวัตถุประสงค์เพื่อจัดการข้อมูลทรัพยากรบุคคล ช่วยให้สามารถจัดเก็บข้อมูลของพนักงานทั้งหมดได้อย่างมีระบบเกี่ยวข้องกับข้อมูลเกี่ยวกับบุคคล, ข้อมูลโครงสร้างหน่วยงาน, ข้อมูลข้าราชการ, ข้อมูลลูกจ้าง, วันลา และข้อมูลอื่นๆ ที่เกี่ยวข้องกับการจัดการทรัพยากรบุคคล
                                    </li>
                                </ul>
                                
                            </q-card>
                            <q-img
                                src="@/assets/1-1.png"
                                    style="
                                    display: block;
                                    margin: 0 auto;
                                    margin-top: 20px;

                                    width: 80%;

                                    "
                                />
                           </div> 

                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            2. หลักการทำงานของระบบ 
                      
                               <q-card  class="card1 text-weight-regular" style="margin-top: 10px;" >
                            
                                <ul>
                                    <li>
                                        เมื่อมีการ Request มาจากหน้าเว็บ request ทั้งหมดจะถูกส่งมาที่ Traefik ที่เป็นตัว API Gateway โดยที่ตัว Traefik จะดูจาก Rule ที่เราได้ทำการตั้งค่าเอาไว้ที่ docker-compose.yml ว่าเมื่อมีการ Request เข้ามาที่ Url Path ไหนจะทำการ Point ไปที่ Docker Container ตัวใด โดยที่ก่อนใช้งานระบบ จะต้องทำการ Authentication โดยผ่าน Keycloak ซึ่งเมื่อผ่านแล้วจึงจะสามารถใช้งานระบบได้ และเมื่อมีการเรียกใช้งาน API นั้น ตัว API จะทำการ Validate Access Token ที่แนบมากับ Request ทุกครั้งว่า valid หรือไม่ หลังจากนั้น API จะทำการ Query Database ตาม Logic ของ Application แล้วหลังจากนั้น จึงส่งผลลัพธ์กลับไปให้ FrontEnd แสดงผล                                    </li>
                                </ul>
                                
                            </q-card>
                           
                           </div> 



                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            3. เครื่องที่ใช้สำหรับการทดสอบระบบจะติดตั้งอยู่ที่เครื่อง 192.168.1.9 โดยหากเป็นการติดตั้ง Service ที่พัฒนาขึ้นมาใหม่โดยที่ยังไม่เคยทำการติดตั้งมาก่อน จะต้องทำการสร้าง folder สำหรับติดตั้งที่ Server ก่อน ซึงการจะเข้าสู่ Server จะต้องทำการ Secure Shell เพื่อเข้าไปยังเครื่อง server โดยใช้คำสั่ง
                      
                               <q-card  class="card1 text-weight-regular" style="margin-top: 10px;" >
                            
                                <ul>
                                    <li>
                                        ssh frappet@frappet.com                                    
                                    </li>
                                </ul>
                                
                            </q-card>
                              <p class="q-pa-md text-weight-regular" >หลังจากนั้นให้ใส่รหัสผ่าน “FPTadmin2357”</p>

                           </div> 

                           <div class="col-12" style="margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            4. เมื่อเข้าสู่ server ให้ Chage directory ไปที่ folder /home/docker โดยใช้คำสั่ง
                      
                               <q-card  class="card1 text-weight-regular" style="margin-top: 10px;" >
                            
                                <ul>
                                    <li>
                                        cd docker                                 
                                    </li>
                                </ul>
                                
                            </q-card>
                             
                           </div>


                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            5. หากต้องการจะดูว่าใน folder นี้มี sub folder อะไรบ้างใช้คำสั่ง
                      
                               <q-card  class="card1 text-weight-regular" style="margin-top: 10px;" >
                            
                                <ul>
                                    <li>
                                        ls -la                           
                                    </li>
                                </ul>
                                
                            </q-card>
                            <p class="q-pt-md text-weight-regular">หรือ</p>
                            <q-card  class="card1 text-weight-regular" >
                            
                            <ul>
                                <li>
                                    ls                        
                                </li>
                            </ul>
                            
                        </q-card>
                           </div>



                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            6. หลังจากนั้นสร้าง folder ของ service เช่นหากต้องการสร้าง service ของระบบงาน report ให้ทำการสร้าง folder โดยใช้คำสั่งดังนี้
                      
                               <q-card  class="card1 text-weight-regular" style="margin-top: 10px;" >
                            
                                <ul>
                                    <li>
                                        mkdir bma-ehr-{service name}
                                    </li>
                                </ul>
                                
                            </q-card>
                            <p class="q-pa-md text-weight-regular" style="margin-bottom: 0px;">
                                โดยเปลี่ยน service name เป็นชื่อ service ของตัวเอง เพื่อให้สามารถจำแนกได้ว่า folder นี้เป็น service อะไรของระบบ bma-ehr
                            </p>
                            
                           </div>



                           <div class="col-12" style=" margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            7. ทำการสร้างไฟล์ docker-compose.yml
                           </div>





                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            8. โดยทำการเปลี่ยนชื่อ Service เป็นชื่อของ docker image service ที่เราจะต้องทำการ push ขึ้น docker registry ของบริษัท
                      
                            
                           </div>


                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            9.    เปลี่ยน Port ของ Host โดย ห้ามซ้ำกับของ Service อื่นๆ                      
                        
                           </div>

                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            10. เปลี่ยน Label ในส่วนของชื่อ rule ของ traefik โดยห้ามซ้ำกัน เพราะจะทำให้ Traefik สับสนได้ หลังจากนั้นแก้ URL และ PathPrefix ให้ตรงกับ Path ของตัว API ของเรา
                           </div>



                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            11. สร้าง folder wwwroot เพื่อว่าจะมีการใช้งาน static file

                           </div>



                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            12. สร้าง file appsettings.json เพื่อทำการตั้งค่า config ต่างๆของตัว api ที่จะให้ test env นั้น ต่อฐานข้อมูลไปที่ server ไหน ตามตัวอย่าง **ค่า config ต่างๆอาจจะเปลี่ยนไปตามแต่ละ Service ดังนั้นให้ดูจาก Code ที่ตัวเองเขียนว่ามีการใช้ค่า Config อะไรบ้าง**

                           </div>



                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            13. หลังจากนั้นให้ทำการสร้าง Dockerfile ไว้ที่ Folder ของ Sourcecode ของ Service ที่เราทำการพัฒนาตามตัวอย่างนี้ โดยแก้ไขค่าให้สอดคล้องกันกับตัวระบบที่เราพัฒนา

                           </div>


                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            14. โดยที่ Dockerfile นี้จะเป็นไฟล์สำคัญที่เราจะใช้ในการ build docker image

                           </div>



                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            15. ทำการสร้างไฟล์ GitHub Action Script โดยดูตัวอย่างได้ จาก Folder ใน Sourcecode
                            <q-img
                                src="@/assets/1-2.png"
                                    style="
                                    display: block;
                                    margin: 0 auto;
                                    margin-top: 20px;

                                    width: 50%;

                                    "
                                />
                                <div class="text-center text-grey-6" style="margin-top: 20px">
                รูปภาพที่ 1.1.2 การสร้างไฟล์ GitHub Action Script 
                        </div>

                           </div>



                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            16. โดยทำการสร้างไฟล์ release_{service name}.yaml เพื่อทำการ Build and Deploy ของ Service ที่พัฒนาเพิ่ม ตามตัวอย่าง โดยทำการแก้ไขค่า folder และไฟล์ต่างๆให้ถูกต้องกับ Service ที่กำลังพัฒนา
                           </div>



                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            17. ทำการ login ไปที่ https://docker.frappet.com โดยใช้คำสั่งดังนี้
                            <b>**หากไม่มีรหัส สามารถติดต่อหาพี่อุ้ม หรือพี่แจ๊ค เพื่อขอให้ส้ราง username สำหรับใช้งาน Docker Registry** </b>
                            <q-card  class="card1 text-weight-regular" style="margin-top: 10px;" >
                            
                            <ul>
                                <li>
                                    docker login docker.frappet.com
                                </li>
                            </ul>
                            
                        </q-card>
                           </div>




                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            18. การที่จะรัน Github Action ที่สร้างขึ้นมานั้นจะต้องใช้งาน act ซึ่งเป็น cli จะต้องทำการติดตั้งโปรแกรมนี้ก่อนใช้งาน ซึ่งสามารถทำได้หลายวิธี 1 ในวิธีนั้นคือติดตั้งผ่าน scoop ซึ่งการติดตั้งสามารถเข้าไปดูได้ที่ www.scoop.sh ซึ่งหลังจากติดตั้ง scoop แล้วสามารถติดตั้ง act ได้ผ่านคำสั่ง
                          
                            <q-card  class="card1 text-weight-regular" style="margin-top: 10px;" >
                            
                            <ul>
                                <li>
                                    scoop install act
                                </li>
                            </ul>
                            
                        </q-card>
                           </div>





                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            19. หลังจากที่ติดตั้ง act แล้วจะทำการ run Github Action เพื่อทำการ Build และ Deploy ไปยัง Test Server โดยใช้คำสั่งนี้
                          
                            <q-card  class="card1 text-weight-regular" style="margin-top: 10px;" >
                            
                            <ul>
                                <li>
                                    act workflow_dispatch -W .github/workflows/{githib action file} --input IMAGE_VER={image version} -s DOCKER_USER={user name} -s DOCKER_PASS={password} -s SSH_PASSWORD={SSH Password}
                                </li>
                            </ul>
                            
                        </q-card>
                           </div>



                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            20. ซึ่งระบบจะทำการสร้าง Docker Image และ Push ขึ้นไปไว้ที่ Docker Registry และทำการ Deploy ที่ Test Server ให้โดยอัตโนมัติ ซึ่งหากทำการ Build and Deploy สำเร็จ จะแสดงข้อความดังนี้
                           </div>



                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            21. หากเป็นการ Build เพื่อ Update Service เดิมสามารถเริ่มต้นได้ที่ ข้อ 19 ได้เลย
                           </div>


                       

                    </q-card-section>
                    </q-card>


                    



                    


                </q-expansion-item>
                <div class="col-12 text-weight-medium">                   
                    </div>
                        <q-expansion-item class="text-weight-medium bg-grey-4"
                        
                    expand-separator
                    label="Production Environment"
                    >

                    <q-card>
                    <q-card-section>
                        <div style="margin-bottom: 10px;">
                            1. Environment Diagram
                            <q-img
                                src="@/assets/2-1.png"
                                    style="
                                    display: block;
                                    margin: 0 auto;
                                    margin-top: 20px;

                                    width: 80%;

                                    "
                                />
                                <div class="text-center text-grey-6" style="margin-top: 20px">
                รูปภาพที่ 1.2.1 การสร้างไฟล์ GitHub Action Script 
                        </div>
                           </div>


                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            2. หลักการทำงานจะคล้ายๆกับ Test Environment เพียงแต่ว่าตัวฐานข้อมูล mySQL จะถูกสร้างขึ้นเป็น container ของตัว Production โดยเฉพาะ
                           </div>




                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            3. เนื่องจากเราได้ทำขั้นตอนของการ Build Docker Image ไปในระหว่างการทดสอบระบบแล้ว เราจึงไม่ต้องทำขั้นตอนการ Build Image ซ้ำอีกรอบ เนื่องจาก Image ทั้งหมดจะถูก push ขึ้นไปที่ 
                            <a href="https://docker.frappet.com" target="_blank">
                                https://docker.frappet.com   
                                        </a>แล้วนั่นเอง
                           </div>



                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            4. ให้ทำการเพิ่ม Service ที่เราต้องการเพิ่มเติมไปที่ docker-compose File โดยอ้างอิงจาก docker-compose file ของ Service ตัวทดสอบ โดยแก้ไข URL, PathPrefix และ Traefik RuleName ให้ไม่ซ้ำกัน โดยดูจากตัวอย่าง File ด้านล่าง
                        
                           </div>




                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            5. หลังจากนั้นให้เข้าไปที่ folder ของตัวระบบ Production แล้วรันคำสั่ง
                          
                            <q-card  class="card1 text-weight-regular" style="margin-top: 10px;" >
                            
                            <ul>
                                <li>
                                    docker compose pull                                
                                </li>
                            </ul>
                            
                        </q-card>
                           </div>





                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            6. ระบบจะ pull Docker Image ทั้งหมดตามที่เราประกาศไว้ใน File Docker Compose
                           </div>





                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            7. หลังจากนั้นรันคำสั่งนี้ เพื่อให้ทำการ Reload Docker Container เพื่อให้ระบบทำการ Update มาใช้ Image Version ล่าสุด
                                                      
                            <q-card  class="card1 text-weight-regular" style="margin-top: 10px;" >
                            
                            <ul>
                                <li>
                                    docker compose up -d                         
                                </li>
                            </ul>
                            
                        </q-card>
                           </div>





                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            8. หากต้องการดู log แต่ละ service ให้ใช้คำสั่ง
                                                      
                            <q-card  class="card1 text-weight-regular" style="margin-top: 10px;" >
                            
                            <ul>
                                <li>
                                    docker compose logs -f {service name}                      
                                </li>
                            </ul>
                            
                        </q-card>
                           </div>




                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            9. โดยการดู service name สามารถใช้คำสั่งนี้เพื่อทำการ List Container ขึ้นมา
                                                      
                            <q-card  class="card1 text-weight-regular" style="margin-top: 10px;" >
                            
                            <ul>
                                <li>
                                    docker compose ps                  
                                </li>
                            </ul>
                            
                        </q-card>
                           </div>



                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            10. ซึ่งระบบจะแสดง Container ทั้งหมดของ docker compose file นี้ขึ้นมาให้เราสามารถดูได้
                                                      
                            <q-card  class="card1 text-weight-regular" style="margin-top: 10px;" >
                            
                            <ul>
                                <li>
                                    docker compose ps                  
                                </li>
                            </ul>
                            
                        </q-card>
                           </div>




                           <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; ">
                            <q-separator color="grey-4" /></div>
                            <div style="margin-bottom: 10px;">
                            11. หากเราต้องการ shell เข้าไปที่ตัว container สามารถใช้คำสั่งนี้
                                                      
                            <q-card  class="card1 text-weight-regular" style="margin-top: 10px;" >
                            
                            <ul>
                                <li>
                                    docker compose exec -it {service name} bash            
                                </li>
                            </ul>
                            
                        </q-card>
                           </div>
                           

                           






                    </q-card-section>
              
                    </q-card> 
                </q-expansion-item>


                </q-expansion-item>
            </div>
    <q-expansion-item 
      class="shadow-1 overflow-hidden"
      style="border-radius: 8px"
      icon="mdi-alert"
      label="เมื่อพบข้อผิดพลาดที่เกี่ยวข้องกับระบบ เช่น ระบบค้าง หรือ ข้อมูลไม่อัปเดต ต้องทำยังไง"
      header-class="bg-secondary text-white "
      expand-icon-class="text-white"
    >
      <q-card>
        <q-card-section>
            <q-img
      src="@/assets/p2.png"
      class="col-12"
    />
        </q-card-section>
      </q-card>
    </q-expansion-item>
  </div>

  



  <div class="q-pa-md col-12 text-weight-medium"
    style="
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
">
    <q-expansion-item
      class="shadow-1 overflow-hidden"
      style="border-radius: 8px"
      icon="mdi-alert"
      label="เมื่อการสูญหายของข้อมูล ต้องทำยังไง ? "
      header-class="bg-secondary text-white "
      expand-icon-class="text-white"
    >
      <q-card>
        <q-card-section>
            <q-img
      src="@/assets/p1.png"
      class="col-12"
    />
        </q-card-section>
      </q-card>
    </q-expansion-item>
  </div>



            <div class="q-pa-md col-12 text-weight-medium"
                style="
                padding-left: 0px;
                padding-right: 0px;
                padding-top: 0px;
            ">
                <q-expansion-item
                class="shadow-1 overflow-hidden"
                style="border-radius: 8px"
                icon="mdi-alert"
                label="การตรวจสอบและแก้ไขปัญหา"
                header-class="bg-secondary text-white "
                expand-icon-class="text-white"
                
                >
                <q-card>
                    <q-card-section>
                        <div style="margin-bottom: 10px;">
                            1. เมื่อพบว่า server มีการตอบสนองช้าลง ซึ่งอาจจะเป็นได้จากการที่ RAM ของ Server ไม่พอ หรือมีการใช้งาน Memory ผิดปกติ สามารถเข้าไปตรวจสอบได้ที่ Grafana Dashboard 
                        </div>  
                        <q-card  class="card1 text-weight-regular" >

                                <ul>
                                    <li>
                                        <a href="https://bma-dashboard.frappet.synology.me/d/fnX_0dPVk/docker-and-system-monitoring?orgId=1&refresh=5m" target="_blank">
                                        https://bma-dashboard.frappet.synology.me/d/fnX_0dPVk/docker-and-system-monitoring?orgId=1&refresh=5m
                                        </a>

                                    </li>
                                </ul>
                                
                            </q-card>                            
                            <q-img
                                src="@/assets/a3.png"
                                    style="
                                    display: block;
                                    margin: 0 auto;
                                    margin-top: 20px;

                                    width: 80%;

                                    "
                                />
                            <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; "><q-separator color="grey-4" /></div>    

                            <div class="d-flex justify-center">
                                2. เมื่อเข้ามาแล้วจะเจอหน้า dashboard ให้ไปดูในส่วนของ Memory Consume 
                                <q-img
                                src="@/assets/a1.png"
                                    style="
                                    display: block;
                                    margin: 0 auto;
                                    margin-top: 20px;
                                    width: 50%;

                                    "
                                />
                
                        </div>  
                        <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; "><q-separator color="grey-4" /></div>    


                        <div style="margin-bottom: 10px;">
                        3. เมื่อพบว่ามี container ตัวใดที่มีการใช้ memory มากผิดปกติ เราจะเข้าไปทำการ stop continer หรือทำการ restart Container ใหม่ โดย ssh เข้าไปที่เครื่อง server 
                        </div>  
                        <q-card  class="card1 text-weight-regular" >

                                <ul>
                                    <li>
                                        
                                            ssh frappet@frappet.com 
                                    </li>
                                    
                                </ul>
                                
                            </q-card>   
                            <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; "><q-separator color="grey-4" /></div>
                            

                            <div style="margin-bottom: 10px;">
                        4. ทำการใส่ password หลังจากนั้นระบบจะ ssh ไปที่เครื่อง server 
                        </div>   
                            <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; "><q-separator color="grey-4" /></div>
                        

                        
                            <div style="margin-bottom: 10px;">
                        5. ทำการ Change Directory ไปยัง folder ที่ติดตั้ง Docker 
                        </div>  
                        <q-card  class="card1 text-weight-regular" >

                                <ul>
                                    <li>
                                        
                                        frappet@dockerserver:~$ cd docker 
                                    </li>
                                    
                                </ul>
                                
                            </q-card>   
                            <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; "><q-separator color="grey-4" /></div>


                            <div style="margin-bottom: 10px;">
                        6. หลังจากนั้นทำการลิสต์รายการ Container ที่ Run อยู่ เพื่อที่จะทำการ Stop หรือ Restart Container ที่ต้องการ โดยใช้คำสั่ง 
                        </div>  
                        <q-card  class="card1 text-weight-regular" >

                                <ul>
                                    <li>
                                        
                                        frappet@dockerserver:~/docker$ docker ps 
                                    </li>
                                    
                                </ul>
                                
                            </q-card>   
                            <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; "><q-separator color="grey-4" /></div>



                            <div style="margin-bottom: 10px;">
                        7. ระบบจะแสดงรายชื่อ Container ที่ทำงานอยู่ขั้นมา 
                        </div>    
                            <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; "><q-separator color="grey-4" /></div>



                            <div style="margin-bottom: 10px;">
                        8. ทำการ Stop Container ที่ต้องการ โดยใช้คำสั่ง 
                        </div>  
                        <q-card  class="card1 text-weight-regular" >

                                <ul>
                                    <li>
                                        
                                        frappet@dockerserver:~/docker$ docker stop container_name
                                    </li>
                                    
                                </ul>
                                
                            </q-card>   
                            <div class="col-12" style="margin-top: 30px; margin-bottom: 30px; "><q-separator color="grey-4" /></div>


                            <div style="margin-bottom: 10px;">
                        9. หลังจากนั้นทำการ Start Container ที่ต้องการขึ้นมาอีกครั้ง โดยการใช้คำสั่ง 
                        </div>  
                        <q-card  class="card1 text-weight-regular" >

                                <ul>
                                    <li>
                                        
                                        frappet@dockerserver:~/docker$ docker start container_name
                                    </li>
                                    
                                </ul>
                                
                            </q-card>   
                    </q-card-section>        
                    </q-card>

    </q-expansion-item>
  </div>





            



            




</template>

<style>
.iconcontat {
    color: #74747468; 
    font-size: 25px;
    margin-right: 1%;
}

.icon_cer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.txt{
    color: #747474df;
    font-size :12px;
}

.txt1{
    color: black;
    font-size :14px;
}

.card1{
    background-color: #e2e2e268;
}


</style>