博客

django项目、vue项目部署云服务器的详细过程

  • Post category:http

下面是部署 Django 项目和 Vue 项目到云服务器的详细过程及示例说明。

第一部分：Django 项目部署到云服务器

1. 选择云服务器

首先需要选择一款云服务器，常见的云服务器提供商有阿里云、腾讯云、AWS 等等，可根据自己的需求选择合适的云服务器。

2. 安装必要的软件

在新建的云服务器上，需要安装必要的软件，在这里以 Ubuntu 18.04 为例，可以使用以下命令：

sudo apt update 
sudo apt install python3-pip python3-venv nginx

其中，python3-pip 是 Python3 的包管理器，python3-venv 是 Python3 的虚拟环境管理器，nginx 是 Web 服务器。

3. 部署 Django 项目

接下来，我们需要将 Django 项目部署到云服务器上。一般来说，可以按照以下步骤进行部署：

  1. 创建一个 Python 虚拟环境：

bash
python3 -m venv myprojectenv

  1. 激活虚拟环境：

bash
source myprojectenv/bin/activate

  1. 安装 Django（注意版本）：

bash
pip install django==version

  1. 在服务器上准备好静态文件（如 media 文件和静态集合文件），通常需要使用 collectstatic 命令：

bash
python manage.py collectstatic

  1. 设置服务器上的数据库服务

例如常用的 PostgreSQL 数据库服务，首先安装：

bash
sudo apt install postgresql postgresql-contrib

然后配置服务：

bash
sudo -u postgres psql
CREATE DATABASE mydb;
CREATE USER myuser WITH PASSWORD 'password';
ALTER ROLE myuser SET client_encoding TO 'utf8';
ALTER ROLE myuser SET default_transaction_isolation TO 'read committed';
ALTER ROLE myuser SET timezone TO 'UTC';
GRANT ALL PRIVILEGES ON DATABASE mydb TO myuser;
\q

  1. 收集配置和文件

    收集需要设置的配置文件，通常包含：

  2. 项目配置文件 settings.py

  3. 部署配置文件 gunicorn.conf.py
  4. 代理服务配置文件 nginx.config

在执行完上述步骤后，我们就可以通过访问云服务器的 IP 地址或域名来访问 Django 项目了。

4. 示例说明

以 Django 项目 mysite 为例，我们可以使用以下命令进行部署：

# 登录云服务器
ssh user@your_server_ip

# 在服务器上创建一个Python虚拟环境
python3 -m venv myprojectenv

# 激活虚拟环境
source myprojectenv/bin/activate

# 安装 Django
pip install django

# 在服务器上准备好静态文件
python manage.py collectstatic

# 安装 PostgreSQL 服务
# 在ubuntu上执行命令
sudo apt install postgresql postgresql-contrib

# 激活 PostgreSQL 服务，然后设置数据库服务
sudo -u postgres psql
CREATE DATABASE mydb;
CREATE USER myuser WITH PASSWORD 'password';
ALTER ROLE myuser SET client_encoding TO 'utf8';
ALTER ROLE myuser SET default_transaction_isolation TO 'read committed';
ALTER ROLE myuser SET timezone TO 'UTC';
GRANT ALL PRIVILEGES ON DATABASE mydb TO myuser;
\q

# 将项目从 Github clone 到服务器上
git clone https://github.com/django/django.git

# 启动项目
python manage.py runserver 0.0.0.0:8000

第二部分：Vue 项目部署到云服务器

1. 选择云服务器

同样需要选择一款云服务器，根据自己的需求选择合适的云服务器。

2. 安装必要的软件

在新建的云服务器上，同样需要安装必要的软件，下面以 Ubuntu 16.04 为例，可使用以下命令：

sudo apt update
sudo apt-get install build-essential libssl-dev curl git-core

其中，build-essential 是编译工具；libssl-dev 是开发 SSL/TLS 加密的库，curl 是命令行工具，git-core 是 Git 的核心。

3. 部署 Vue 项目

接下来，我们需要将 Vue 项目部署到云服务器上。部署过程中需要关注以下几点：

  1. 使用 npm 或 yarn 包管理工具安装 Vue 的依赖关系；
  2. 构建 Vue 项目；
  3. 配置 Nginx 代理服务。

在部署时，具体步骤如下：

  1. 下载 Vue 项目：

bash
git clone https://github.com/VueJSTodoApp/frontend.git

  1. 安装 npm 或 yarn：

bash
sudo apt-get install npm

或

bash
sudo apt-get install yarn

  1. 安装依赖：

bash
npm install

或

bash
yarn install

  1. 构建项目：

bash
npm run build

或

bash
yarn run build

构建完成后，将生成一个目录（例如 dist 目录），内部包含了构建的文件。

  1. 配置 Nginx：

“`nginx
server {
listen 80;
server_name example.com;

  location / {
     root /path/to/dist;
     index  index.html index.htm;
     try_files $uri $uri/ /index.html;
  }

}
“`

  1. 重启 Nginx 服务：

bash
sudo service nginx restart

到这里，Vue 项目就成功部署到云服务器上了。

4. 示例说明

以 Vue 项目 VueJsTodoApp 为例，以下是部署到云服务器的命令：

# 安装 npm 依赖关系
sudo apt-get install npm

# 从 Github 上 clone 项目
git clone https://github.com/VueJSTodoApp/frontend.git

# 进入项目文件夹
cd frontend

# 安装依赖
npm install

# 构建项目
npm run build

# 安装 Nginx Web 服务器
sudo apt-get install -y nginx

# 配置 Nginx.conf 文件样式
sudo nano /etc/nginx/sites-available/default

# 加入以下配置内容
server {
    listen 80 default_server;
    listen [::]:80 default_server ipv6only=on;

    root /home/ubuntu/frontend/dist;
    index index.html index.htm;

    server_name your-domain-name.com;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

# 重启 Nginx 服务
sudo systemctl restart nginx

至此，Vue 项目已经成功部署到云服务器上了。

Tags: