正文

前端vue+后端django项目创建以及自动部署流程(代码片段)

Alex_996  Alex_996  2022-12-06  541

关键词：

所有的环境都安装完了之后，接下来就要创建项目了，完整的项目开发流程是由开发的同学先写完代码，然后交付给运维的同学部署到测试和生产环境。DevOps可以让整个流程自动化，开发的同学只需要稍微会一些工具就可以完成部署的工作。

前端Vue项目创建+自动部署

准备工作：

本地安装了Node、npm
本地安装了WebStorm（可选，其它IDE也行）
本地安装了Git，熟悉Git的基本操作
服务器，安装了宝塔面板

本地项目创建

首先通过WebStorm创建一个Vue项目。

2. 本地添加.gitignore文件，这一步非常重要，不然后面上传代码的时候会把所有的东西都上传到GitCode或者GitHub，导致仓库可能几十M甚至几百M。几种常见项目的.gitignore文件可以查看以下链接：https://gitcode.net/matrixstudio/gitignore

Vue项目.gitignore文件：

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Snowpack dependency directory (https://snowpack.dev/)
web_modules/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test

# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache

# Next.js build output
.next
out

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

# Stores VSCode versions used for testing VSCode extensions
.vscode-test

# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*

# System
.DS_Store

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.code
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

代码仓库创建

创建GitCode代码仓库（考虑到有些同学可能访问不了GitHub，为了后面协作，所以将代码上传到GitCode，然后通过镜像同步到GitHub）

2. 创建GitHub代码仓库（最终的代码还是要同步到GitHub的，因为后面配置自动化部署以及钉钉群机器人，都是基于GitHub进行）

仓库镜像同步

首先需要在GitHub上创建一个Access Token

首先填写AccessToken的名字，然后可以设置token永久有效，再把所有的权限都选上，最后点击生成Token。

拿个小本本记住这个Token值，它只会在这个页面显示一次，点击复制。

2. GitCode上配置镜像仓库

注意这里填写的仓库URL需要添加用户名，然后选择推送仓库，密码填写的就是前面在GitHub生成的AccessToken。

GitCode配置SSH秘钥（如果已经配置过可以跳过这一步）

在本地生成SSH秘钥，可以使用一下命令（替换为自己的邮箱）：

ssh-keygen -t rsa -b 2048 -C "email@example.com"

一路回车，可以看到类似以下内容：

使用以下命令复制公钥：

cat C:\\Users\\liu_z/.ssh/id_rsa.pub | clip

在GitCode添加公钥：

4. 配置完了镜像仓库和SSH秘钥之后之后，就可以将现有代码按照以下命令推送到GitCode，然后GitCode就会自动同步到GitHub了。

git init
git remote add origin git@gitcode.net:matrixstudio/web_template_0_frontend.git
git add .
git commit -m "Initial commit"
git push -u origin master

GitCode上传代码成功：

GitHub代码镜像成功：

添加解析域名（可选）

服务器宝塔创建网站并配置SSH秘钥

添加站点
站点添加成功
同理在服务器生成SSH秘钥，在根目录下执行

ssh-keygen -t rsa -b 2048 -C "email@example.com"

将ssh公钥添加到authorized_keys

cat .ssh/id_rsa.pub >> .ssh/authorized_keys

将ssh私钥添加到GitHub代码仓库

查看SSH私钥

cat ~/.ssh/id_rsa

添加私钥

GitHub Actions自动构建

在GitHub的Actions创建Node构建任务，参考其代码
在本地项目根目录创建.github/workflows/node.js.yml文件

name: Node.js CI

on:
  push:
    branches: [ "master" ]
  pull_request:
    branches: [ "master" ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [16.x]

    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js $ matrix.node-version 
        uses: actions/setup-node@v3
        with:
          node-version: $ matrix.node-version 
          cache: 'npm'
      - run: npm ci
      - run: npm run build --if-present
      - name: deploy
        uses: easingthemes/ssh-deploy@v2.1.5
        env:
          SSH_PRIVATE_KEY: $ secrets.SERVER_SSH_KEY 
          SOURCE: dist/*
          REMOTE_HOST: '121.37.67.75'
          REMOTE_USER: root
          TARGET: /www/wwwroot/www.template.matrix-studio.top

需要修改的地方就是最后几行：

REMOTE_HOST：服务器公网IP
TARGET：目标网站在服务器的文件地址

提交自动化构建代码，可以发现GitHub Actions已经开始构建了

4. 构建成功后，代码自动推送到服务器对应文件位置，自动部署成功

到此为止，前端项目的创建和自动部署就已完成，本地开发完成后，只需要推送代码，即可自动部署到服务器上。

后端Django项目创建+自动部署

本地项目创建

首先通过PyCharm创建一个Django项目。
本地添加.gitignore文件。几种常见项目的.gitignore文件可以查看以下链接：https://gitcode.net/matrixstudio/gitignore

Django项目.gitignore文件：

# Byte-compiled / optimized / DLL files
__pycache__/
*.py[cod]
*$py.class

# C extensions
*.so

# Distribution / packaging
.Python
build/
develop-eggs/
dist/
downloads/
eggs/
.eggs/
lib/
lib64/
parts/
sdist/
var/
wheels/
share/python-wheels/
*.egg-info/
.installed.cfg
*.egg
MANIFEST

# PyInstaller
#  Usually these files are written by a python script from a template
#  before PyInstaller builds the exe, so as to inject date/other infos into it.
*.manifest
*.spec

# Installer logs
pip-log.txt
pip-delete-this-directory.txt

# Unit test / coverage reports
htmlcov/
.tox/
.nox/
.coverage
.coverage.*
.cache
nosetests.xml
coverage.xml
*.cover
*.py,cover
.hypothesis/
.pytest_cache/
cover/

# Translations
*.mo
*.pot

# Django stuff:
*.log
local_settings.py
db.sqlite3
db.sqlite3-journal

# Flask stuff:
instance/
.webassets-cache

# Scrapy stuff:
.scrapy

# Sphinx documentation
docs/_build/

# PyBuilder
.pybuilder/
target/

# Jupyter Notebook
.ipynb_checkpoints

# IPython
profile_default/
ipython_config.py

# pyenv
#   For a library or package, you might want to ignore these files since the code is
#   intended to run in multiple environments; otherwise, check them in:
# .python-version

# pipenv
#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
#   However, in case of collaboration, if having platform-specific dependencies or dependencies
#   having no cross-platform support, pipenv may install dependencies that don't work, or not
#   install all needed dependencies.
#Pipfile.lock

# PEP 582; used by e.g. github.com/David-OConnor/pyflow
__pypackages__/

# Celery stuff
celerybeat-schedule
celerybeat.pid

# SageMath parsed files
*.sage.py

# Environments
.env
.venv
env/
venv/
ENV/
env.bak/
venv.bak/

# Spyder project settings
.spyderproject
.spyproject

# Rope project settings
.ropeproject

# mkdocs documentation
/site

# mypy
.mypy_cache/
.dmypy.json
dmypy.json

# Pyre type checker
.pyre/

# pytype static type analyzer
.pytype/

# Cython debug symbols
cython_debug/

# Editor directories and files
.idea
.code
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

代码仓库创建

创建GitCode代码仓库

创建GitHub代码仓库

仓库镜像同步

同样类似于前端的配置操作，其中密码还是使用前面生成的token。

GitCode上配置镜像仓库

注意这里填写的仓库URL需要添加用户名，然后选择推送仓库，密码填写的就是前面在GitHub生成的AccessToken。

2. 配置完了镜像仓库和SSH秘钥之后之后，就可以将现有代码按照以下命令推送到GitCode，然后GitCode就会自动同步到GitHub了。

git init
git remote add origin git@gitcode.net:matrixstudio/web_template_0_backend.git
git add .
git commit -m "Initial commit"
git push -u origin master

Github Actions自动测试+部署

在GitHub的Actions创建Node构建任务，参考其代码
服务器创建后端文件夹

在本地项目根目录创建.github/workflows/django.yml文件

name: Django CI

on:
  push:
    branches: [ "master" ]
  pull_request:
    branches: [ "master" ]

jobs:
  build:

    runs-on: ubuntu-latest
    strategy:
      max-parallel: 4
      matrix:
        python-version: [ 3.9 ]

    steps:
      - uses: actions/checkout@v3
      - name: Set up Python $ matrix.python-version 
        uses: actions/setup-python@v3
        with:
          python-version: $ matrix.python-version 
      - name: Install Dependencies
        run: |
          python -m pip install --upgrade pip
          pip install -r requirements.txt
      - name: Run Tests
        run: |
          python manage.py test
      - name: deploy
        uses: easingthemes/ssh-deploy@v2.1.5
        env:
          SSH_PRIVATE_KEY: $ secrets.SERVER_SSH_KEY 
          SOURCE: ./*
          REMOTE_HOST: '121.37.67.75'
          REMOTE_USER: root
          TARGET: /www/wwwroot/www.template.matrix-studio.top/web_template_0_backend

需要修改的地方就是最后几行：

REMOTE_HOST：服务器公网IP
TARGET：目标网站在服务器的文件地址，即刚才创建的文件夹路径

将ssh私钥添加到GitHub代码仓库

查看SSH私钥

cat ~/.ssh/id_rsa

添加私钥

服务器宝塔创建Django项目

Python项目管理器创建项目

然后等待安装即可。

网站NGINX添加反向代理

settings.py配置ALLOWED_HOSTS，然后提交代码

等待自动部署成功后，在宝塔重启Django应用即可看到Django页面。

访问链接：http://www.template.matrix-studio.top/dapi/

到此为止，后端Django项目的创建和自动部署也已完成。

django+vue前后端分离项目部署

...权限会有bug。2、如配置所示，有两个Server，分别部署了前端服务，和后端服务，值得注意的是两个Server用的是同一个服务器，监听的端口不同。3、vue部署需要注意的是反向代理地址：以及后面的端口问题4、后端的Server需要注意... 查看详情

使用 Elastic Beanstalk 部署 Vue JS Django 应用程序

...本地构建的应用程序，我已准备好部署它，但使用Vue作为前端和Django作为后端对我来说是新事物。我当前的文件夹结构如下：-后端-前端-环境后端文件夹是一个传统的Django项目，使用sqlite作为查看详情

前端vue+后端django实现微信登录(代码片段)

...ff0c;也不用注册账号，直接扫码即可。准备工作：前端Vue+后端Django项目创建查看详情

前端vue+后端django实现微信登录(代码片段)

...ff0c;也不用注册账号，直接扫码即可。准备工作：前端Vue+后端Django项目创建查看详情

sonarqube9.x与jenkins进行集成并扫描后端java以及前端vue代码；(代码片段)

...描步骤3.Jenkins构建后会在sonarqube内生成扫描报告三、扫描前端vue项目1.sonarqube创建项目并生成项目令牌2.Jenkins前端vuejob中添加SonarQube代码扫描步骤3.Jenkins构建后会在sonarqube内生成扫描报告遇到的问题：解决方式：前言我们... 查看详情

前端vue与后端thinkphp在服务器的部署

...览的，Thinkphp通过域名指向index.php文件才可以浏览。要使前端正常调用后端数据，有两种方法：1、前端跨域调用后端数据，2、前端打包文件部署在后端的服务器文件夹下（同域）。web服务器：apache一、跨域在服务器配置站点：... 查看详情

超详细docker部署springboot+vue项目（三更博客项目部署）(代码片段)

...录1.项目部署规划2.前置工作2.1修改后端配置文件ip2.2修改前端Vue项目运行端口2.3修改前端对应的服务器ip2.4后端项目打包2.4.1解决打包问题2.4.2项目打包，本地运行jar包测试2.5前端项目打包2.6开放端口2.7配置安全组规则3.Docker... 查看详情

django+vue整合后，部署到windowsapache遇到的问题汇总

...go+elementUI接口自动化平台。vue数据绑定模式，能减少很多前端工作，（前端目前难看的很呐）web接口自动化，基于python+request+excel模式的升级维护，结合企业微信、邮件、echarts报告展示，定时器BackgroundScheduler（而不是用windows任... 查看详情

前端采用vue+webpack后端采用java全栈开发，怎么实现自动部署

参考技术A前端可以用flightplan.js部署。varconfig=require("./webpack.config.js");varwebpack=require("webpack")varwebpackDevServer=require("webpack-dev-server")config.entry.unshift("webpack-dev-server/client?localhost:8080","webpack/hot/dev-serve... 查看详情

nginx+uwsgi部署django+vue项目(代码片段)

...sgi去启动django项目，支持并发更多准备前后端代码先从vue前端搞起解决node环境更查看详情

django-crm项目学习-stark的action以及多级筛选功能

...ction(自定制函数多选功能效果)1.1 admin效果1.2多选效果前端和后端进行的操作1.2.1前端发过来的参数是？号后各个参数用&来拼接1.2.2后端django会自动把形同的key的内容进行拼接成列表1.3action内容赋值，给check绑定id1.3.1前端内... 查看详情

如何部署 django 后端并将前端应用程序反应到同一域

】如何部署django后端并将前端应用程序反应到同一域【英文标题】：Howtodeployadjangobackendandreactfrontendapptosamedomain【发布时间】：2019-06-1722:37:26【问题描述】：所以我在谷歌上搜索了这个问题的答案，并找到了一种使用mediumarticle将... 查看详情

jenkins+rancher自动化部署

...涉及rancher和jenkins安装部署，包含javaserver项目、WAR项目、前端VUE项目部署配置介绍。服务器环境信息：需要在安装jenkins服务上部署下面相应的软件，请注意软件版本，如已经安装相关软件，可跳过此章节。需要安装rancher-cli，并... 查看详情

问题将 vue.js 前端与我的 django 后端集成

】问题将vue.js前端与我的django后端集成【英文标题】：Problemintegrateavue.jsfrontendwithmydjangobackend【发布时间】：2020-07-2022:51:30【问题描述】：我在将vue.js前端与我的Django后端集成时遇到问题。我使用webpackloader将我的vue.jsweb-pack-stats... 查看详情

在 Heroku 上使用 Django Rest Framework 后端部署 Angular 4 前端

】在Heroku上使用DjangoRestFramework后端部署Angular4前端【英文标题】：DeployinganAngular4frontendwithaDjangoRestFrameworkbackendonHeroku【发布时间】：2018-02-1820:23:40【问题描述】：我使用Angular4（使用AngularCLI）构建了前端，使用Django和DjangoRestFrame... 查看详情

Heroku 部署混乱：Vue.js 前端与 Flask 后端

】Heroku部署混乱：Vue.js前端与Flask后端【英文标题】：Herokudeploymentconfusion:Vue.jsfrontendwithFlaskbackend【发布时间】：2019-04-0714:57:42【问题描述】：我目前的网络应用程序涉及一个Vue.js前端和一个充当RESTAPI的Flask后端。它们分别在我... 查看详情

在 GCP App Engine 上部署 Django、Django REST Framework 后端和 VueJS + webpack 前端（标准）

...在GCPAppEngine上部署Django、DjangoRESTFramework后端和VueJS+webpack前端（标准）【英文标题】：DeployingDjango,DjangoRESTFrameworkbackend&VueJS+webpackfrontendonGCPAppEngine(standard)【发布时间】：2021-04-1111:06:17【问题描述】：我有以下设置：Django==3.1.4d... 查看详情

前后端分离:vue项目部署服务器操作步骤详细(代码片段)

部署前端项目vue到服务器首对应的是找到项目进入对应的目录下进行npmrunbuild会生成一个dist文件将整个dist文件上传到服务器就可以了然后就是首先就是安装node.js对应的版本不建议最先版本有可能会出现一些莫名的错误node.Js 安... 查看详情