19. 12. 13.

Javascript & JQuery 퀵 메뉴

간단하게 만들어본 제이쿼리 퀵메뉴
?
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        .quick { position:absolute; width: 150px; top:0; right:0; display: inline-block; transition-duration: 1s; margin-top:10em; margin-right:1em; }
        /* 스크롤바 박스 */
        .quick > div { background-color: #f1f1f1; border: 2px solid #ddd; border-radius: 0.5em;}
    </style>
    <script>
        // 스크롤을 만들기위해 body 를 키움 없애도 뎀
        $(function () { $("html,body").css("height", "10000px");});
        // 따라다니게 하기 위한 처리
        $(window).scroll(function (e) {
            $(".quick").css("top", $(this).scrollTop()+"px");
        });
    </script>
</head>
<body>
    <div class="quick">
        <div>
            <ul>
                <li><a>menu 1</a></li>
                <li><a>menu 2</a></li>
                <li><a>menu 3</a></li>
                <li><a>menu 4</a></li>
                <li><a>menu 5</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

자바스크립트(Javascript)로 변경해 봄
?
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        .quick { position:absolute; width: 150px; top:0; right:0; display: inline-block; transition-duration: 1s; margin-top:10em; margin-right:1em; }
        /* 스크롤바 박스 */
        .quick > div { background-color: #f1f1f1; border: 2px solid #ddd; border-radius: 0.5em;}
    </style>
    <script>
        // 창크기 키워 스크롤 나오게 하기
        window.onload = function () {
            document.getElementsByTagName("body")[0].style.height = "10000px";
        }
        window.addEventListener('scroll', function (e) {
            document.querySelector(".quick").style.top = window.scrollY + "px"
        })
    </script>
</head>
<body>
    <div class="quick">
        <div>
            <ul>
                <li><a>menu 1</a></li>
                <li><a>menu 2</a></li>
                <li><a>menu 3</a></li>
                <li><a>menu 4</a></li>
                <li><a>menu 5</a></li>
            </ul>
        </div>
    </div>
</body>
</html>
작성자: 시간: 댓글 없음:
라벨: , , ,

19. 12. 5.

GCP PHP + MariaDB + Nginx + vsftpd 구성

1. 프로젝트 생성
- 프로젝트명 : server
- 프로젝트 선택 : 전체 -> server

2. VM인스턴스 생성
- 메뉴 -> VM인스턴스 -> 만들기
- 이름 : mysite
- 머신유형 : 초소형(공유 vCPU 1 개)
- 부팅 디스크 : 변경 -> OS이미지 -> CentOS 8
- http 트래픽허용 체크
- 만들기

3. VM 인스턴스 목록
- SSH 클릭(인증되며 까만창 뜸)

4. 프롬프트 창내의 명령실행
- 관리자 접속
1
sudo su -
- 업데이트 및 다운로드,압축풀기 설치
1
2
yum update -y
yum install -y wget unzip
- FTP 용 계정생성 및 비밀번호 생성
1
2
useradd myid
passwd myid
- 사이트 경로 생성 및 권한 추가
1
2
mkdir /home/myid/mysite
chmod +x /home/myid/mysite
- PHP + 모듈 설치
1
2
3
4
5
dnf install -y dnf-utils http://rpms.remirepo.net/enterprise/remi-release-8.rpm
dnf module list php
dnf module reset php
dnf module install -y php:remi-7.4
dnf install -y php php-fpm php-mysql php-gd php-common php-cli php-json php-opcache php-devel php-imagick php-mbstring php-mcrypt php-mysqlnd php-pear php-xml php-xmlrpc php-soap php-dba php-bcmath php-pdo php-ldap
- vi 편집기("insert 키" : 편집 및 수정, "Escape 키" : 보기모드, ":wq" : 저장, ":q" : 저장하지않고 닫기, ":/검색어" : 검색어 검색 )
- 편집기로 PHP 설정파일(/etc/php.ini) 설정 명령
1
vi /etc/php.ini
- php.ini 변경내용(검색해서 해당 값만 변경)
1
2
3
4
cgi.fix_pathinfo = 0
allow_url_fopen = Off
expose_php = Off
display_errors = Off
- 편집기로 php-fpm 설정파일(/etc/php-fpm.d/www.conf) 수정
1
vi /etc/php-fpm.d/www.conf
- www.conf 변경내용 1. apache를 myid로 교체(apache로 검색)
1
2
user = myid
group = myid
- www.conf 변경내용 2. 주석제거(nobody로 검색)
1
2
listen.owner = nobody
listen.group = nobody
- www.conf 변경내용 3. listen 의 /run/php-fpm/www.sock을 127.0.0.1:9000으로 수정
1
listen = 127.0.0.1:9000
- Nginx 설치
1
2
wget http://nginx.org/packages/mainline/centos/8/x86_64/RPMS/nginx-1.17.6-1.el8.ngx.x86_64.rpm
yum localinstall -y nginx-1.17.6-1.el8.ngx.x86_64.rpm
- Nginx 설정파일 수정
1
vi /etc/nginx/nginx.conf
- Nginx 설정파일 수정내용(http{}안에 추가)
1
server_tokens off;
- 방화벽 설정(http,https,ftp,database(MariaDB))
1
2
3
4
5
6
firewall-cmd --permanent --zone=public --add-service=http
firewall-cmd --permanent --zone=public --add-service=https
firewall-cmd --permanent --add-service=ftp
firewall-cmd --permanent --add-port=21/tcp
firewall-cmd --permanent --add-port=3306/tcp
firewall-cmd --reload
- Nginx 기본 설정 삭제
1
rm -f /etc/nginx/conf.d/default.conf
- Nginx 기본 설정 만들기
1
vi /etc/nginx/conf.d/default.conf
- Nginx 기본 설정 만들기 내용(아래내용을 복사, 붙여넣기)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
server {
    listen       80;
    server_name  localhost;
    charset utf-8;
    root   /home/myid/mysite;
    #access_log  /var/log/nginx/host.access.log  main;
    location / {
        index index.php index.html index.htm;
    }
    error_page  404              /404.html;
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /home/myid/mysite;
    }
    location ~ \.php(?:$|/) {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass   127.0.0.1:9000;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include        fastcgi_params;
    }
}
- php-fpm, nginx 재시작
1
2
3
systemctl start php-fpm nginx
systemctl enable php-fpm nginx
systemctl reload nginx
- ftp 프로그램인 vsftpd 설치
1
2
3
dnf -y install vsftpd
mv /etc/vsftpd/vsftpd.conf /etc/vsftpd/vsftpd.conf_orig
grep -v ^# /etc/vsftpd/vsftpd.conf_orig > /etc/vsftpd/vsftpd.conf
- vsftpd 설정파일 삭제
1
rm -f /etc/vsftpd/vsftpd.conf
- vsftpd 설정파일 생성
1
vi /etc/vsftpd/vsftpd.conf
- vsftpd 설정파일 내용입력
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
anonymous_enable=NO
local_enable=YES
write_enable=YES
local_umask=022
dirmessage_enable=YES
xferlog_enable=YES
connect_from_port_20=YES
xferlog_std_format=YES
listen=NO
listen_ipv6=YES
pam_service_name=vsftpd
userlist_enable=YES
pasv_enable=Yes
pasv_max_port=40000
pasv_min_port=40000
- SELinux 권한에서 차단되는 경우가 있으므로 처리
1
setenforce 0
- SELinux 권한에서 차단되는 경우가 있으므로 설정도 편집
1
sed -i 's/SELINUX=enforcing/SELINUX=disabled/g' /etc/selinux/config
- ftp 불가한 아이디 목록1에서 편집(root 제거)
1
vi /etc/vsftpd/ftpusers
- ftp 불가한 아이디 목록2에서 편집(root 제거)
1
vi /etc/vsftpd/user_list
- vsftpd 설정된 서비스로 재시작
1
2
3
systemctl start vsftpd
systemctl enable vsftpd
systemctl restart vsftpd
- ftp 접속권한 편집
1
2
3
4
5
6
chown myid:myid /home/myid/
chown myid:myid /home/myid/mysite/
chown nginx:nginx /home/myid/
chown nginx:nginx /home/myid/mysite/
chown -R myid:myid /home/myid/
chmod -Rf 775 /home/myid
- ftp 아이디 myid 접근권한 편집
1
vi /etc/passwd
- ftp 아이디 myid 접근권한 편집맨아래 추가
1
myid:x:1001:1002::/home/myid/mysite:/bin/bash
- MariaDB 설정 추가
1
yum search mariadb
- MariaDB 설치 및 서비스 추가
1
2
3
yum install -y mariadb-server
systemctl start mariadb
systemctl enable mariadb
- MariaDB root 루트 비밀번호 생성 및 설정(비밀번호,접속권한,test테이블등)
1
mysql_secure_installation
- 그냥 순서대로함...
1
2
3
4
5
6
7
8
"엔터"
y
password
password
y
n
y
y
- MariaDB 재시작
1
systemctl restart mariadb
- MariaDB 접속
1
mysql -u root -p
- MariaDB 패스워드 로그인후 원격접속 가능하도록 root에 권한 부여, 비밀번호 다시 부여 후 접속 종료
1
2
3
GRANT ALL PRIVILEGES ON *.* TO root@'%' IDENTIFIED BY 'password';
FLUSH PRIVILEGES;
exit
5. Google Cloud Platform 메뉴에서 VPC네트워크 방화벽설정
- Google Cloud Platform 메뉴 -> 방화벽규칙 -> 만들기
- 이름 : mysite
- 대상 : 네트워크의 모든인스턴스
- 소스 IP 범위: 0.0.0.0/0
- 프로토콜 및 포트 : tcp 체크 -> 20-21,3306,40000
- 만들기
6. PHP MariaDB 접속 테스트 - index.php 생성
1
vi /home/myid/mysite/index.php
- index.php 내용
1
2
3
4
5
6
7
<?php
$conn=mysqli_connect('127.0.0.1', 'root', 'password');
if($conn)
  echo "db연결성공";
else
  echo "db연결 실패";
?>
7. ssh 옆에 외부 아이피 클릭 및 확인
8. ftp는 fileziller 이용하거나 크롬 브라우저로 접속확인가능
작성자: 시간: 댓글 없음:
라벨: , , , , , ,
피드 구독하기: 글 (Atom)