arthur/website-documentation
1
0
Fork 0
mirror of https://github.com/DiscordFactory/website-documentation.git synced 2026-01-14 09:24:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

📝 Write documentation

Browse Source
This commit is contained in:
Freeze455
2021-10-06 18:09:09 +02:00
parent 82439fec97
commit 083da3fe0d
1 changed files with 13 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
src/templates/modules/documentation/advanced/Deployment.vue
View File

@@ -1,151 +1,20 @@
<template>
<Documentation title="Deployment">
<p>
Deployment is the logical phase after developing an application. This section will deal with the production deployment of the application.
In the first time, you should to install all dependencies.
</p>
<h2>Starting your project</h2>
<p>All you have to do is install the dependencies with the following commands</p>
<div class="flex items-center space-x-5">
<CodeHighlight code="$ npm install" />
<p class="text-gray-800">or</p>
<CodeHighlight code="$ yarn install" />
</div>
<p>In the second time, you should to build your application because the production mode cannot read and execute the typescript natively.</p>
<div class="flex items-center space-x-5">
<CodeHighlight code="$ npm run build" />
<p class="text-gray-800">or</p>
<CodeHighlight code="$ yarn build" />
</div>
<div class="space-y-5">
<h2>Deploy with PM2</h2>
<p>PM2 is a daemon process manager that will help you manage and keep your application online 24/7. Install PM2 :</p>
<div class="flex items-center space-x-5">
<CodeHighlight code="$ npm install -g pm2" />
<p class="text-gray-800">or</p>
<CodeHighlight code="$ yarn global add pm2" />
</div>
<p>Create a root file named <code class="active">ecosystem.config.js</code>.</p>
<CodeHighlight :code="ecosystem" />
<AlertInfo>
<template v-slot:label>
Info
</template>
<template v-slot:message>
The <span class="font-bold">index.ts</span> file in the <span class="font-bold">start folder</span> is the entry point for your application.
</template>
</AlertInfo>
<p>Then open a terminal in the root folder of your application and run the following command :</p>
<CodeHighlight :code="startPm2" />
</div>
<div class="space-y-5">
<h2>Deploy with Docker</h2>
<p>Docker is free software for launching applications in isolated containers.</p>
<div>
<p class="mr-2">Learn more: </p>
<LinkExternal url="https://www.docker.com">
Docker Documentation
</LinkExternal>
</div>
<AlertWarn>
<template v-slot:label>
Warn
</template>
<template v-slot:message>
In the docker section, replace <br />
- <span class="font-bold">[name]</span> with the name of your bot, <br />
- <span class="font-bold">[version]</span> with the version of your bot. (You can use `latest`, `dev`... with docker) <br />
- <span class="font-bold">[env]</span> with your env file (`environment.json` or `environment.yml`)
</template>
</AlertWarn>
<p>Create a root file named <code class="active">Dockerfile</code>.</p>
<CodeHighlight :code="Dockerfile" />
<p>Then open a terminal in the root folder of your application and run the following command :</p>
<CodeHighlight :code="buildImage" />
<p>Use docker-compose to automate the start command of your bot with the following content :</p>
<CodeHighlight :code="dockerCompose" />
<p>Finally, you can run your image inside a container with the following command :</p>
<CodeHighlight :code="startContainer" />
<AlertInfo>
<template v-slot:label>
Info
</template>
<template v-slot:message>
The option <span class="font-bold">-d</span> allows to launch the container in the background.
</template>
</AlertInfo>
<p>To stop the container, run the following command :</p>
<CodeHighlight :code="stopContainer" />
<p>To stop see the log of your discord bot, run the following command :</p>
<CodeHighlight :code="seeLogs" />
</div>
<Documentation>
<Markdown v-if="data" :source="data" />
<Spinner v-else />
</Documentation>
</template>
<script setup lang="ts">
import Markdown from '../../../../components/Markdown.vue'
import Documentation from '../../../../components/Documentation.vue'
import CodeHighlight from '../../../../components/CodeHighlight.vue'
import LinkExternal from '../../../../components/LinkExternal.vue'
import AlertInfo from '../../../../components/AlertInfo.vue'
import AlertWarn from "../../../../components/AlertWarn.vue";
import Spinner from '../../../../components/Spinner.vue'
import useDocumentation from '../../../../services/Documentation'
import { markdownEndpoint } from '../../../../utils/Navigation'
import { onMounted, ref } from 'vue'
const ecosystem = `
module.exports = {
apps : [{
name : 'Discord Factory application',
instances : 'max',
script : 'npm',
args : 'start'
}]
}`
const startPm2 = `
$ cd /path/to/project/folder/root
$ pm2 start`
const Dockerfile = `
FROM node:16-alpine3.11
RUN mkdir -p /usr/src/[name]
WORKDIR /usr/src/[name]
COPY . /usr/src/[name]
RUN yarn build
CMD ["yarn", "start"]
`
const buildImage = `
$ cd /path/to/project/folder/root
$ docker build -t [name]:[version] .
`
const startContainer = `
$ docker-compose up -d
`
const stopContainer = `
$ docker-compose down
`
const seeLogs = `
$ docker logs [name]
`
const dockerCompose = `
version: "3"
services:
[name]:
image: [name]:[version]
container_name: [name]
volumes:
- "/path/to/project/folder/root/[env]:/usr/src/[name]/[env]:ro"
`
</script>
const data = ref('')
onMounted(async () => {
data.value = await useDocumentation(markdownEndpoint.DEPLOYMENT)
})
</script>