前端vue部署到nginx并且配置https安全证书全流程

**前端Vue部署到Nginx并配置HTTPS安全证书全流程**

在本文中，我们将一步步地讲解如何部署一个基于Vue的前端应用到Nginx服务器，并且配置HTTPS安全证书。

### **一、准备工作**

####1. 安装Node.js和npm首先，我们需要安装Node.js和npm。可以从官方网站下载最新版本的Node.js和npm。

####2. 创建Vue项目接下来，我们需要创建一个新的Vue项目。我们使用以下命令来创建一个新项目：

bashnpm init vue@latest

####3. 安装依赖包在项目目录下，安装必要的依赖包：

bashnpm install

### **二、配置Nginx**

####1. 安装Nginx首先，我们需要安装Nginx。可以从官方网站下载最新版本的Nginx。

####2. 配置Nginx接下来，我们需要配置Nginx。我们创建一个新的配置文件`/etc/nginx/sites-available/default`，内容如下：

bashserver {
 listen80;
 server_name example.com;

 location / {
 proxy_pass  /> proxy_ /> proxy_set_header Upgrade $ /> proxy_set_header Connection 'upgrade';
 proxy_set_header Host $host;
 proxy_cache_bypass $ /> }
}

####3. 重载Nginx最后，我们需要重载Nginx：

bashsudo service nginx reload

### **三、配置HTTPS安全证书**

####1.生成私钥和CSR首先，我们需要生成一个私钥和CSR（Certificate Signing Request）。我们使用以下命令来生成私钥和CSR：

bashopenssl genrsa -out server.key2048openssl req -new -key server.key -out server.csr

####2. 配置证书请求接下来，我们需要配置证书请求。我们编辑`server.csr`文件，添加以下内容：

bash[req]
distinguished_name = req_distinguished_name[req_distinguished_name]
countryName = Country Name (2 letter code)
countryName_default = CNorganizationName = Organization NameorganizationalUnitName = Organizational Unit NamecommonName = Common Name (e.g. server FQDN or YOUR name)
commonName_max =64[req_ext]
subjectAltName = @.com

####3.生成证书最后，我们需要生成证书。我们使用以下命令来生成证书：

bashopenssl x509 -req -in server.csr -signkey server.key -out server.crt -days3650

### **四、配置Vue应用**

####1. 配置HTTPS首先，我们需要配置HTTPS。我们编辑`vue.config.js`文件，添加以下内容：

javascriptmodule.exports = {
 // ...
 pwa: {
 workboxOptions: {
 skipWaiting: true,
 clientsClaim: true,
 },
 },
};

####2. 配置代理接下来，我们需要配置代理。我们编辑`vue.config.js`文件，添加以下内容：

javascriptmodule.exports = {
 // ...
 devServer: {
 proxy: {
 '^/api': ' /> },
 },
};

####3. 重载Vue应用最后，我们需要重载Vue应用：

bashnpm run serve

### **五、测试**

我们可以使用以下命令来测试我们的应用：

bashcurl -X GET  />如果一切正常，应该会返回数据。

以上就是前端Vue部署到Nginx并配置HTTPS安全证书的全流程。希望这篇文章能够帮助你成功部署一个基于Vue的前端应用！