deploy: docker部署集成,github action 自动化部署

.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+dockerfile
+.git
+.gitignore

.github/workflows/ci.yaml

@@ -0,0 +1,31 @@
+name: Build app and deploy to aliyun
+on:
+  #监听push操作
+  push:
+    branches:
+      # master分支，你也可以改成其他分支
+      - main
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/[email protected]
+      - name: Install Node.js
+        uses: actions/[email protected]
+        with:
+          node-version: "16.13.2"
+      - name: Install npm dependencies
+        run: npm install
+      - name: Run build task
+        run: npm run build
+      - name: Deploy to Server
+        uses: easingthemes/[email protected]
+        env:
+          SSH_PRIVATE_KEY: ${{ secrets.SSH_KEY }}
+          ARGS: "-rltgoDzvO --delete"
+          SOURCE: ".output/"
+          REMOTE_HOST: "81.68.108.130"
+          REMOTE_USER: root
+          TARGET: "/home/blog" # 打包后的 dist 文件夹将放在
+          # EXCLUDE: "node_modules,.git,.github"

components/BlogsTree.vue

@@ -1,47 +1,55 @@
 <template>
-    <li v-for="(item, index) in blogsTree" :key="index">
-        <nuxt-link v-if="item.type == 'file'" :to="`/blogs/${fileBlogPathHandler(item)}`" @click="setBlogPath(item.path)"
-            :class="{ active: fileBlogPathHandler(item) == props.active }" class="file">{{
-                fileNameHandler(item) }}</nuxt-link>
-        <span v-if="item.type == 'dir'">{{ item.name }}</span>
-        <ul v-if="item.type == 'dir' && item.children.length">
-            <BlogsTree :blogsTree="item.children" v-if="item.type == 'dir' && item.children.length" :active="props.active">
-            </BlogsTree>
-        </ul>
-    </li>
-</template> 
+  <li v-for="(item, index) in blogsTree" :key="index">
+    <nuxt-link
+      v-if="item.type == 'file'"
+      :to="`/blogs/${fileBlogPathHandler(item)}`"
+      @click="setBlogPath(item.path)"
+      :class="{ active: fileBlogPathHandler(item) == props.active }"
+      class="file"
+      >{{ fileNameHandler(item) }}</nuxt-link
+    >
+    <span v-if="item.type == 'dir'">{{ item.name }}</span>
+    <ul v-if="item.type == 'dir' && item.children.length">
+      <BlogsTree
+        :blogsTree="item.children"
+        v-if="item.type == 'dir' && item.children.length"
+        :active="props.active"
+      >
+      </BlogsTree>
+    </ul>
+  </li>
+</template>
 
 <script setup>
-const props = defineProps(['blogsTree', 'active']);
+const props = defineProps(["blogsTree", "active"]);
 const blogsTree = props.blogsTree;
-const setBlogPath = inject('setBlogPath');
+const setBlogPath = inject("setBlogPath");
 const fileNameHandler = (item) => {
-    return item.name.replace(/(.md|.js)$/, '');
+  return item.name.replace(/(.md|.js)$/, "");
 };
 const fileBlogPathHandler = (item) => {
-    return item.path.slice(14, -3);
+  return item.path.slice(14, -3);
 };
-onMounted(() => {
-});
+onMounted(() => {});
 </script>
 
 <style lang="scss" scoped>
-@import '../assets/theme/theme.scss';
+@import "../assets/theme/theme.scss";
 
 .file {
-    cursor: pointer;
+  cursor: pointer;
 
-    &:hover {
-        @include theme-hover();
-    }
+  &:hover {
+    @include theme-hover();
+  }
 }
 
 .active {
-    @include theme-active();
+  @include theme-active();
 }
 
 a {
-    text-decoration: none;
-    word-break: break-all;
+  text-decoration: none;
+  word-break: break-all;
 }
-</style>
+</style>

docker/dev/docker-compose.yaml

@@ -0,0 +1,13 @@
+services:
+  blog:
+    image: duxiaohao/pm2:v1
+    container_name: blog-dev
+    restart: always
+    # ports:
+    #   - "3000:3000"
+    networks:
+      - docker
+    volumes:
+      - ../../.output:/blog
+    working_dir: /blog
+    entrypoint: pm2-runtime start ecosystem.config.js

docker/prod/docker-compose.yaml

@@ -0,0 +1,17 @@
+services:
+  blog:
+    image: duxiaohao/pm2:v1
+    container_name: blog-prod
+    restart: always
+    # ports:
+    #   - "3000:3000"
+    networks:
+      - docker
+    volumes:
+      - .:/blog
+    working_dir: /blog
+    entrypoint: pm2-runtime start ecosystem.config.js
+networks:
+  docker:
+    external:
+      name: docker

dockerfile

@@ -0,0 +1,5 @@
+FROM node:hydrogen-alpine
+
+LABEL name="duxiaohao"
+
+RUN npm i -g pm2

package.json

@@ -2,8 +2,8 @@
   "name": "nuxt-app",
   "private": true,
   "scripts": {
-    "build": "nuxt build & copyfiles nginx/** .output & copyfiles docker-compose.yml .output",
-    "copy": "copyfiles nginx/** .output & copyfiles docker-compose.yml .output",
+    "build": "nuxt build && npm run copy",
+    "copy": "copyfiles ecosystem.config.js .output && copyfiles -u 2 docker/prod/docker-compose.yaml .output ",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",