建一个网站

发表于 | 分类于 |

尝试搭建网站

前言

  大二上的数据库大作业实在把我折腾得够呛，但也给我打开了网页开发的新世界。所以我觉得可以进一步尝试建站。当然这次可不能瞎写（毕竟是给别人看的），同时也要考虑扩展性、安全性、鲁棒性等等。所以我觉得有必要记录一下设计的思路。

经验

  下面是我数据库大作业的个人总结：

  由于之前并未学习过前后端的知识，也没学过 JavaScript 和 php，这次是边学边用。前端一开始编写的界面比较粗糙，后面了解到 Bootstrap 框架以及一些插件后，重新对界面进行了修改，使得界面变得比较简洁，同时能够自适应不同分辨率的屏幕，改善了用户体验。主要的难点在于与后端的信息交换，主要学习并采用了 POST、GET 以及 ajax 方法。后端的功能就只是接收前端信息、查询数据库、发送查询信息，功能比较固定，所以代码结构都大同小异，主要的难点在于调试，因为不了解如何查看php和SQL Server的错误信息，所以只能在浏览器中对接收到的数据进行分析，这对调试造成了一定难度。   数据库方面，为了实现模糊查询等功能，了解了LIKE 语句和正则表达式，但由于 SQL Server 对正则表达式的支持较差，所以未能实现更高级的查询。网络上大部分的资料是针对 MySQL，所以某些问题都是自己看文档解决，极大的提高了看文档的能力。不过未来如果做相关项目，还是采用 MySQL方便一些。 在编写网页途中发现某些属性的问题，与 赖林华 讨论后得到了比较好的解决。他对数据库的设计比我强，而且他在数据库中添加的 Trigger 也极大地方便了后端的编写。在此对他表示感谢。   从这次系统设计，学习了数据库的操作，包括增、删、改、查，以及网页前后端的基础知识。不足之处在于对网页的知识较少，网页样式比较简单，同时某些功能由于时间不足并未实现。

  当时懵懵懂懂，在网上查到啥就用啥，所以导致不同页面所采用的技术完全不同，写到最后根本不可能修改前面的东西。所以最好采取模块化，这样修改一个模块可以不影响其他东西。

目标

  1. 最基本的：可以通过访问网址访问得到
  2. 能实现一定功能
  3. 如果能通过广告赚钱那是最好不过了

软件准备 2020/01/04

在网上查了点资料，感觉目前已经有 Wordpress 了，就没必要从零开始造轮子了，不妨在 wordpress 的基础上逐渐添加自己的代码。服务端打算采用 LNMP，虽说 LAMP 更加强大一点，但 LNMP 对服务器配置的要求没那么高，而且我的水平还用不上 LAMP。下面是安装过程：（参考了 https://www.digitalocean.com/community/tutorials/how-to-install-wordpress-with-lemp-on-ubuntu-18-04）

配置Linux

首先新建一个非 root 用户（用 root 太不安全了），并且设置 sudo 权限：

1
2
adduser username #username为相应的用户名
usermod -aG sudo username

然后设置防火墙：

1
2
3
ufw allow OpenSSH #添加ssh到白名单，否则会连不上服务器
ufw enable
ufw status #确保ssh没被阻塞

然后切换到非 root 用户，执行下列步骤。

下载Nginx

Nginx是一个高性能的HTTP代理服务器，可以直接通过 apt 安装：

1
2
sudo apt update
sudo apt install nginx

然后将 Nginx 添加到防火墙白名单中：

1
sudo ufw allow 'Nginx HTTP'

安装好后 Nginx 会自启动，我们可以试着在浏览器中访问服务器地址，如果看到 Welcome to nginx! 的页面则说明安装成功。

下载Mysql

Mysql 是一个数据库系统，也可以直接通过 apt 安装：

1
sudo apt install mysql-server

然后设置数据库密码：

1
sudo mysql_secure_installation

按照提示来就可以了。

然后进入 mysql：

1
sudo mysql

添加数据库：

1
CREATE DATABASE wordpress DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci;

添加用户：

1
GRANT ALL ON wordpress.* TO 'wordpressuser'@'localhost' IDENTIFIED BY 'password';

更新设置：

1
FLUSH PRIVILEGES;

退出 sql：

1
EXIT;

下载PHP

PHP 是后端处理动态请求的软件，我们需要安装 php、php-fpm、php-mysql等：

1
2
sudo apt install php php-fpm php-mysql
sudo apt install php-curl php-gd php-intl php-mbstring php-soap php-xml php-xmlrpc php-zip

然后执行：

1
sudo systemctl restart php7.2-fpm

配置Nginx

打开nginx的默认配置文件，修改使其支持php：

1
sudo nano /etc/nginx/sites-available/default

修改为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
# Default server configuration
#
server {
    listen 80 default_server;
    listen [::]:80 default_server;

    # SSL configuration
    #
    # listen 443 ssl default_server;
    # listen [::]:443 ssl default_server;
    #
    # Note: You should disable gzip for SSL traffic.
    # See: https://bugs.debian.org/773332
    #
    # Read up on ssl_ciphers to ensure a secure configuration.
    # See: https://bugs.debian.org/765782
    #
    # Self signed certs generated by the ssl-cert package
    # Don't use them in a production server!
    #
    # include snippets/snakeoil.conf;

    # root /var/www/html;
    root 你的网站根目录; 


    # Add index.php to the list if you are using PHP
    # index index.html index.htm index.nginx-debian.html;
    index index.php index.html index.htm;
    
    # server_name _;
    server_name 你的IP或者域名;

    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
        try_files $uri $uri/ =404;
    }


    # pass PHP scripts to FastCGI server
    #
    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
    #
    #   # With php-fpm (or other unix sockets):
        fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
    #   # With php-cgi (or other tcp sockets):
    #   fastcgi_pass 127.0.0.1:9000;
    }

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #   deny all;
    #}
}

保存修改退出，先测试有没有错误：

1
sudo nginx -t

重启nginx：

1
sudo systemctl reload nginx

新建一个phpinfo.php:

1
sudo nano /var/www/html/phpinfo.php

输入以下内容：

1
2
<?php 
phpinfo();

保存退出，浏览器访问 你的IP或者域名/phpinfo.php

能正常显示php7.2-fpm的配置信息说明lnmp环境就搭好了。

安装phpmyadmin（有问题，暂时不装）

phpmyadmin是数据库管理软件，要是你想能鼠标点点就看见表格、数据这些的，建议安装，不然就只能命令行敲代码了

1
2
3
sudo apt-get install phpmyadmin
sudo ln -s /usr/share/phpmyadmin/ /usr/share/nginx/www 
sudo systemctl reload nginx

安装过程中会提示输入mysql密码和设置root登录密码，安装完成访问 你的IP或者域名/phpmyadmin

下载并配置 wordpress

下载 wordpress-5.3.2-zh_CN.zip，这个可以在 https://cn.wordpress.org/ 上找到，但很不幸，貌似该网站出了点问题，所以只能在百度上搜一下。

下载好后，把解压出来的文件放在 /var/www 下，然后执行：

1
cp /var/www/wordpress/wp-config-sample.php /var/www/wordpress/wp-config.php

赋予 Nginx 权限：

1
sudo chown -R www-data:www-data /var/www/wordpress

这里www-data是nginx的默认运行用户。

输入：

1
curl -s https://api.wordpress.org/secret-key/1.1/salt/

复制里面的内容。然后打开：

1
sudo nano /var/www/wordpress/wp-config.php

并将复制的内容复制到里面对应位置，同时修改以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
. . .

define('DB_NAME', 'wordpress');

/** MySQL database username */
define('DB_USER', 'wordpressuser');

/** MySQL database password */
define('DB_PASSWORD', 'password');

. . .

define('FS_METHOD', 'direct'); //在最后添加这一行

wordpress 的 nginx 配置文件

创建wordpress的nginx配置文件：

1
sudo nano /etc/nginx/sites-available/wordpress

里面内容是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
server {
        listen 80 ;#default_server;
        listen [::]:80;
        
        #listen [::]:80 default_server ipv6only=on;
        
        root 你的网站根目录（也就是wordpress根目录）;
        
        index index.php index.html index.htm;
        
        # Make site accessible from http://localhost/
        
        server_name 自己的域名或者IP;
        
        client_max_body_size 100M;

        location / {
                #try_files $uri $uri/ =404;               
             try_files $uri $uri/ /index.php?$args;#伪静态
        }

        location ~ \.php$ {
                include snippets/fastcgi-php.conf;
                fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
                fastcgi_param SCRIPT_FILENAME
                $document_root$fastcgi_script_name;
                include fastcgi_params;
        }
}

最好把 /etc/nginx/sites-available和/etc/nginx/sites-enabled下的其它配置文件删掉，不然容易出现问题。之后重启nginx：

1
2
3
sudo rm /etc/nginx/sites-available/default /etc/nginx/sites-enabled/default #删除默认配置
sudo ln -s /etc/nginx/sites-available/wordpress /etc/nginx/sites-enabled/
sudo systemctl reload nginx

搭建开发环境 2020/01/05

咱用的是 Windows，所以还得在装一次，不过这次我们采用 LAMP（因为有一键安装包 XAMPP 可用）

首先下载XAMPP，选择 PHP 和 Linux 上相同的版本，然后安装，建议安装到 D 盘，避免出现读写权限相关的错误。（如果出现端口错误，自行改端口，或在任务管理器中禁用占用端口的服务）

然后下载wordpress，同样安装与 Linux 上相同的版本。

（注：我的版本：xampp-windows-x64-7.2.26-0-VC15-installer.exe 和bitnami-wordpress-5.3.2-0-module-windows-x64-installer.exe）

顺便记录一下，我装完后，Apache 显示有个 example.com 出错了，已停止。但我看 wordpress 还是能访问，所以估计是什么 bug 吧……

wordpress插件

以下是一些必要的插件：

  • all-in-one-wp-security-and-firewall 防火墙
  • useso-take-over-google 替换掉谷歌字体，加速国内访问
  • wp-editormd markdown编辑器