Vue项目部署上线全过程记录(保姆级教程)

非常感谢您对Vue项目上线过程的关注。以下是我整理的“Vue项目部署上线全过程记录（保姆级教程）”的详细攻略。

确认服务器环境
在开始之前，请确保您已经购买了云服务器，在服务器上安装好操作系统和需要的软件环境。推荐使用Linux系统，并保证服务器具备如下配置：
操作系统：CentOS 7/Ubuntu 14.04及以上版本；
CPU：1核及以上；
内存：2GB及以上；
数据库：Mysql；
Web服务器：Nginx；
网络环境：公网IP，开启80端口。
项目打包
打开CMD/Terminal，进入项目目录，执行如下命令，生成dist目录：

npm run build

上传代码到服务器
使用FTP等工具将dist文件夹中的内容上传至服务器。
安装Nginx
在终端中执行以下命令，安装Nginx：

yum install -y nginx

编写Nginx配置文件
在/etc/nginx/conf.d目录下，新建一个对应项目的配置文件，如blog.conf，并添加如下代码：

server {
    listen 80;
    server_name yourdomain.com;
    root /var/www/blog/dist;
    index index.html;

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

其中yourdomain.com替换为您自己的域名或IP地址。

启动Nginx
在终端中执行以下命令，启动Nginx：

systemctl start nginx

此时，打开浏览器，输入yourdomain.com或服务器IP地址，即可访问您的网站。

配置HTTPS
为了保证网站的安全性，我们需要为网站配置HTTPS。这里以使用Let's Encrypt为例，具体的过程请参考Let's Encrypt官网。

（示例1）使用Certbot自动配置Let's Encrypt证书：

yum install -y epel-release
yum install -y certbot
certbot certonly --standalone -d yourdomain.com

（示例2）手动配置证书：

yum install -y openssl
openssl genrsa -out server.key 2048
openssl req -new -key server.key -out server.csr
openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt

最后，在Ngnix配置文件中添加如下代码：

server {
    listen 80;
    server_name yourdomain.com;
    rewrite ^(.*)$ https://$server_name$1 permanent;
}

server {
    listen 443 ssl;
    server_name yourdomain.com;
    ssl_certificate /path/to/your/domain.crt;
    ssl_certificate_key /path/to/your/domain.key;
    root /var/www/blog/dist;
    index index.html;

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

其中/path/to/your/domain.crt和/path/to/your/domain.key替换为您的证书路径。

安装PM2
使用PM2，我们可以方便地管理我们的Node.js应用程序。在终端中执行以下命令，安装PM2：

npm install -g pm2

启动应用
在终端中执行如下命令，启动应用：

pm2 start /var/www/blog/server/index.js

其中/var/www/blog/server/index.js替换为您自己的应用程序路径。

自动启动PM2
在终端中执行如下命令，配置PM2自动启动：

pm2 startup

配置Nginx反向代理API接口
为了实现前端与后端之间的通信，我们需要配置Nginx反向代理API接口。具体的步骤如下：
在Nginx配置文件中添加如下代码：

server {
    listen 80;
    server_name api.yourdomain.com;
    index index.html;

    location / {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $http_host;
    }
}

在应用程序中修改端口号为8000：

app.listen(8000, () => {
    console.log('Server listening on port 8000');
});

重新启动应用并重启Nginx。

至此，Vue项目部署上线全过程记录（保姆级教程）就结束了。如果遇到任何问题，欢迎随时联系我。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue项目部署上线全过程记录(保姆级教程) - Python技术站

Vue项目部署上线全过程记录(保姆级教程)

相关文章