使用vue3、nodejs搭建的网站

前言

线上演示演示地址

前端使用了vue3和ts，后端使用nodejs、express、mysql等

如需源码，请留言

网站搭建

服务器（云服务器）

基本配置

• IP地址：xxxxxxxx

• 账号： root

• 密码：xxxxxxx

• ubunt linux

• 华为 云耀云 （账号：手机号，密码同上）

• CPU 2核

• 内存 4GiB

• 系统盘 40GiB

• 带宽 2Mbit/s

宝塔管理

• 账号： xxxxx

• 密码： xxxx

• 外网面板地址: xxxxxxx

域名

基本信息

• www.301nb.top

• 华为解析

数据库

基本信息

• 通过宝塔进行安装

• MySQL 5.5.62

• 端口 3306

• root xxxxxx

开启远程访问权限

• 连接mysql

mysql -uroot -p

• 更改信息

use mysql

update user set Host = '%' where Host = 'localhost' and User='root';

flush privileges;

• 开启防火墙，放行3306

获取ssl证书

步骤1 下载证书及证书转换

\1. 补全信息时，“证书请求文件”选择的“粘贴已有CSR”请参考以下步骤进行配置。

a. 单击“下载证书”，下载的文件包含了一个pem文件。

“server.pem”文件包括两段证书代码“-----BEGIN CERTIFICATE-----”和“-----END CERTIFICATE-----”。

b. 修改server.pem的后缀名为crt，和生成CSR时的私钥server.key放在一个文件夹内。

\2. 补全信息时，“证书请求文件”选择的“在线生成CSR”请参考以下步骤进行配置。

a. 单击“下载证书”，下载的文件包含了“Apache”、“IIS”、“Nginx”、“Tomcat”4个文件夹和1个“domain.csr”文件，如图1-1所示。

图1-1 解压SSL证书

b. 从Nginx文件夹内获得证书文件“server.crt ”和私钥文件“server.key”。

“server.crt”文件包括两段证书代码“-----BEGIN CERTIFICATE-----”和“-----END CERTIFICATE-----”。

“server.key”文件包括一段私钥代码“-----BEGIN RSA PRIVATE KEY-----”和“-----END RSA PRIVATE KEY-----”。

步骤2 在Nginx的安装目录下创建cert目录，并且将“server.key”和“server.crt”拷贝到nginx的“cert”目录下。

步骤3 配置Nginx中conf同目录下的“nginx.conf”文件。

修改如下参数：

ssl_certificatecert/server.crt;

ssl_certificate_keycert/server.key;

完整的配置如下，其余参数根据实际情况修改：

server {

listen443;

server_namewww.domain.com; #用户服务器的域名

sslon;

ssl_certificatecert/server.crt;

ssl_certificate_keycert/server.key;

ssl_session_timeout5m;

ssl_protocolsTLSv1 TLSv1.1 TLSv1.2;

ssl_ciphersECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;

ssl_prefer_server_cipherson;

location / {

roothtml; #站点目录

indexindex.html index.htm;

}

}

注意：不要直接拷贝所有配置，参数中ssl开头的属性与证书配置有直接关系，其它参数请根据自己的实际情况修改。

参数说明，如表1-1所示。

表1-1 参数说明

参数	参数说明
listen	SSL访问端口号，设置为“443”。
SSL	设置为“on”，启用SSL功能。
ssl_certificate	证书文件“server.crt”。 设置为“server.crt”文件的路径，且路径中不能包含中文字符， 例如“cert/server.crt”。
ssl_certificate_key	私钥文件“server.key”。 设置为“server.key”的路径，且路径中不能包含中文字符， 例如“cert/server.key”。
ssl_protocols	使用的协议。
ssl_ciphers	配置加密套件，写法遵循OpenSSL标准。

步骤4 修改完成后保存配置文件，验证配置是否正确。

进入nginx执行目录下，执行以下命令：

sbin/nginx -t

配置正确，回显信息如下所示：

nginx.conf syntax is ok

nginx.conf test is successful

步骤5 重启Nginx。

Ngnix

• 使用宝塔安装

• 放行 80 443 端口

配置

• 默认配置

  user  www www;
  worker_processes auto;
  error_log  /www/wwwlogs/nginx_error.log  crit;
  pid        /www/server/nginx/logs/nginx.pid;
  worker_rlimit_nofile 51200;
  ​
  stream {
      log_format tcp_format '$time_local|$remote_addr|$protocol|$status|$bytes_sent|$bytes_received|$session_time|$upstream_addr|$upstream_bytes_sent|$upstream_bytes_received|$upstream_connect_time';
    
      access_log /www/wwwlogs/tcp-access.log tcp_format;
      error_log /www/wwwlogs/tcp-error.log;
      include /www/server/panel/vhost/nginx/tcp/*.conf;
  }
  ​
  events
      {
          use epoll;
          worker_connections 51200;
          multi_accept on;
      }
  ​
  http
      {
          include       mime.types;
          #include luawaf.conf;
  ​
          include proxy.conf;
  ​
          default_type  application/octet-stream;
  ​
          server_names_hash_bucket_size 512;
          client_header_buffer_size 32k;
          large_client_header_buffers 4 32k;
          client_max_body_size 50m;
  ​
          sendfile   on;
          tcp_nopush on;
  ​
          keepalive_timeout 60;
  ​
          tcp_nodelay on;
  ​
          fastcgi_connect_timeout 300;
          fastcgi_send_timeout 300;
          fastcgi_read_timeout 300;
          fastcgi_buffer_size 64k;
          fastcgi_buffers 4 64k;
          fastcgi_busy_buffers_size 128k;
          fastcgi_temp_file_write_size 256k;
          fastcgi_intercept_errors on;
  ​
          gzip on;
          gzip_min_length  1k;
          gzip_buffers     4 16k;
          gzip_http_version 1.1;
          gzip_comp_level 2;
          gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
          gzip_vary on;
          gzip_proxied   expired no-cache no-store private auth;
          gzip_disable   "MSIE [1-6]\.";
  ​
          limit_conn_zone $binary_remote_addr zone=perip:10m;
          limit_conn_zone $server_name zone=perserver:10m;
  ​
          server_tokens off;
          access_log off;
  ​
  server
      {
          listen 888;
          server_name phpmyadmin;
          index index.html index.htm index.php;
          root  /www/server/phpmyadmin;
  ​
          #error_page   404   /404.html;
          include enable-php.conf;
  ​
          location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
          {
              expires      30d;
          }
  ​
          location ~ .*\.(js|css)?$
          {
              expires      12h;
          }
  ​
          location ~ /\.
          {
              deny all;
          }
  ​
          access_log  /www/wwwlogs/access.log;
      }
  include /www/server/panel/vhost/nginx/*.conf;
  }

• 配置https等相关内容

server
{
    listen 80;
    server_name www.301nb.top;
    return 301 https://$server_name$request_uri; #http跳转https
}
server 
{
​
    listen 443;
​
    server_name www.301nb.top; #用户服务器的域名
​
    ssl on;
​
    ssl_certificate /etc/ssl/certs/server.crt;
​
    ssl_certificate_key  /etc/ssl/certs/server.key;
​
    ssl_session_timeout 5m;
​
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
​
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
​
    ssl_prefer_server_ciphers on;
​
    location / {
​
    root html; #站点目录
​
    index index.html index.htm;
​
    }
​
}

部署后端项目

nodejs项目

• 配置ssl证书

const key = fs.readFileSync('./ssl/update/server.key', 'utf8')
const cert = fs.readFileSync('./ssl/update/server.crt', 'utf8')

python项目

• linux 安装python

pip3 intasll django

django-admin startproject ***

python3 manage.py startapp ***

python3 manage.py runserver 192.168.0.108:3007 ***

部署前端项目

本地搭建vue项目

• 使用npm安装yarn

• 将本地dist文件夹，与服务器实时同步（通过宝塔更新网页内容）