GIỚI THIỆU TÀI LIỆU - Tài liệu này dùng đề: e_ Triển khai cài đặt website sử dụng kỹ thuật Reverse Proxy.. e_ Triển khai cài đặt CMS WordPress blogs và cài đặt E-commerce WooCommerce..
Trang 1
BO THONG TIN VA TRUYEN THONG HQC VIEN CONG NGHE BUU CHINH VIEN THONG
CO SO TAI THANH PHO HO CHI MINH
KHOA CONG NGHE THONG TIN 2
-000 -
BÁO CÁO GIỮA KỲ & CUÓỎI KỲ
TAI LIEU HUONG DAN THIET LAP VA TRIEN KHAI PHAN MEM
Môn học: Chuyên đề Hệ thống thông tin
Giảng viên hướng dẫn: Lê Hà Thanh
Lop: D2OCQCNHT01-N
Sinh viên thực hiện:
Hồ Đức Hoàng N20DCCNO18
TP.HCM, ngày 17 tháng 06 ršm 2024
Trang 2
MUC LUC
I GIGD THIEU TAL LIEU woe cc ccceseccccscsssssesescssssssseceecesssssceceesensessceceessssesacececssesavasececseanavavacecieenivesecsceeetenenes 2
I TONG QUAN WEBSITE ccccscsesescscscsssssecescsusssssseeeceussssceececesssssceecessssssscesecsnsnasaceceusnsnscacecstensnasacecsnenenes 2
IV HƯỚNG DẪN CÀI ĐẶT VÀ SỬ DỤNG Q 1111121112111 1111211111 111111111 TE1E1111111 T11 Hee 3
4.1 Clone repository về máy tính cá nhân và câu hìnhh 27-22222222 +x+xzx+xcxrererxrxrrrrrrrrrsree 3
4.3 Triên khai cai dat E-Commerce (WOOCOMMENCE) .seccccesesescscssescseseseessscsescsssecesatiteeeneassnsesneass 12
4.4 TriGm KNai CUCD oie ccccccccccccccccecsescscececscsnececececsvsnecececavanecesesecavanecesacecavanecesecevanssesesecatanesetiessanintenss 16
V TAL LIEU DINH KEM.uue.eccccescsesscscecscscscscscscsescscecececscscscecsvavenacececsvavanecesesevavanecesevavananecesevavanetesesevaneneeess 19
DANH MỤC HÌNH ANH
0Ì 29000000: c co
Hinh 5 Cau hinh file nginx Cont cceseseeceescsesseseecescscsesesneseseseeceseseseeceseacaesessecaeanececeaseceueseaeasansneesieeeeeeseaeaseees 6 Hinh 6 Thiét lO .ố ẢẢ 7 Hình 7 Dién thong tin WEDSIt ce eseceeeececceceseseecesescsesesesesesesesescseeusnencaeaeseeseseeseeeceseaseesnsneaeassneceeseeeeeseneaeaneees 8
Hình 8 Thông báo install WordPress thành côn - 5< - 2-22 121 12221231111 11T HH HH HH HH 9
HInh 9 | e0 so ôn n nnnqniáả.::i 9
IÌl 01 ĐC ¡oi 500i u00 8n 10 Hình 11 Giao diện trang lOGÌT -. - - 5< 221 *2 12211211112 HT HT HH TH TK KH HH HH 10
Hình 12 Giao diện trang quản lý các DOSÌ HH HH HH KH KHE HE HT HH T1 Hình 13 Giao diện một trang DlOQ - cà TH HH TH TH HT KH HE TK HE 11
Hình 16 Trường hợp không thanh CONG - <2 2221122223 1125E 13111 11 LH HH TH HH HH HT 18
Trang 3I GIỚI THIỆU TÀI LIỆU
- Tài liệu này dùng đề:
e_ Triển khai cài đặt website sử dụng kỹ thuật Reverse Proxy
e_ Triển khai cài đặt CMS (WordPress blogs) và cài đặt E-commerce (WooCommerce)
e_ Triên khai sử dụng CI/CD bang Github Actions
- Phạm vi: tài liệu này hướng dẫn triển khai ở môi trường phát triển (Development
Environment) và môi trường kiêm thứ (Testing Environment)
II TONG QUAN WEBSITE
- Các công nghệ sử dụng:
se _OS-level virtualization: Docker Desktop
e Reverse proxy server: NGINX
« Content Management System (CMS): WordPress
e Database: MySQL
HI YÊU CẢU HỆ THONG
- _ Yêu cầu phân cứng:
e_ Hệ điều hành: Windows 10/11 64-bit
¢ Dung long RAM: téi thiêu 4GB
¢ Dung luong 6 cứng: tối thiêu 10GB
e_ Kích hoạt ảo hóa phản cứng (hardware virtualization) trong BIOS
e Bat dugc tinh nang WSL 2 trén Windows
- Yéu cau phan mém:
¢ Cai dat san Docker Desktop
e© Cài đặt sẵn IDE hoặc TextEditor nhu Visual Studio Code, Notepad++,
e Phan mém quan ly mA ngu6n như Git, SourceTree,
Trang 4IV HUONG DAN CAI DAT VA SU DUNG
4.1 Clone repository vé may tinh ca nhan va cau hinh
- Mé phan mém SourceTree đã được cài đặt trong máy tính
- Source path / URL: dung link mA nguén github
- _ Destination Path: đường dẫn thư mục (folder) muón dùng đề lưu trữ mã nguôn
Newtab X [im
Local Remote Clone Add Create
Cloning is even easier if you set up a remote account
| https://github.com/Kiritokun0909/DemoWordPress.git | Browse Repository Type: @> This is a Git repository
| | C:\Users\hoduc\Documents\DemoWordPress | Browse
X\
Destination Path
> Advanced Options
Clone
Hình 1 Giao diện phản mềm SourceTree
Trang 5Clone repository DemoWordPress vé may tinh ca nhan
Cau hinh cac service tại file docker-compose.yml
- Service database:
Hinh 2 Cau hinh service database Trong đó, cầu hình bao gồm:
e image: su dung phién ban MySQL 5.7 tir Docker Hub
e container_name: tén cho container
e restart: always: tu déng khoi déng lại container néu nó dừng hoặc bị lỗi
e _environment: Thiết lập các biến môi trường cho MySQL
©_ MYSQL_DATABASE: tên cơ sở dữ liệu
o MYSQL_USER: tén ngwoi dung (user) trong cơ sở đữ liệu (database)
o MYSQL_PASSWORD: mat khau cua user
o MYSQL_ROOT_PASSWORD: mat khau cho user root cia MySQL
© db_data: Lién ket volume "db_data" voi thu muc /var/lib/mysq trong container dé lưu trữ đữ liệu của MyS@QL
Trang 6- Service WordPress:
Hinh 3 Cau hinh service WordPress Trong đó, cầu hình bao gồm:
e _ image: phiên bản wordpress (ở đây sử dụng bản mới nhất từ Docker Hub)
se container name: tên container
e _ restart: always: tự động khởi động lại container néu nó dừng hoặc lỗi
e ports: lién két cong 8080 cua máy chủ với công 80 của container Sau khi chạy thành công,
có thê truy cập WordPress thông qua http://localhost:8080
e _ environment: các biến môi trường cần thiết cho WordPress đề kết nói với cơ sở dữ liệu
o WORDPRESS_DB_HOST: tén service database
© WORDPRESS_DB_USER: tén user dang nhap database (luu y: phai trung với tên
user da dat o service database)
o WORDPRESS_DB_PASSWORD: mat khau cua user đăng nhập database (luu y:
phải trung voi mat khau da dat 6 service database)
© WOHDPRESS_DB_ NAME: tên database (lưu ý: phải trùng với tên database da dat
ở Service database)
© wordpress_data: lién ket volume "wordpress_data" voi thu muc /varAwww/html
trong container đề lưu trữ dữ liệu của WordPress
Trang 7- Service NGINX
Hinh 4 Cau hinh service NGINX Trong đó, cầu hình bao gồm:
se _image: phiên bản NGINX
se container name: tên container
e _ restart: always: Tự động khởi động lại container néu nó dừng hoặc bị lỗi
¢ ports: Lién két céng 80 cua máy chủ với công 80 của container
e volumes:
o_ /nginx.corf: liên két file cáu hình NGINX từ máy chủ với file cáu hình trong
container
o_ Wordpress_ data: liên kết volume "wordpress_ data" với thư mục @arAwww/html
trong container NGINX đề chia sẻ dữ liệu của WordPress
- Cau hinh file nginx.conf
events {}
http { include mime.types default type application/octet-stream sendfile on
keepalive timeout 65
server
listen 80 server name localhost location / proxy_pass http: //wordpress:89 proxy_set_header Host $host proxy_set_header X-Real-IP $remote_addr proxy_set_header X-Forwarded-For $proxy_add_x_ forwarded for proxy_set_header X-Forwarded-Proto $scheme
Hinh 5 Cau hinh file nginx.conf
6
Trang 8Sau khi đã hoàn thành các bước câu hình trên, khởi động Docker Desktop
Mở Command Prompt hoặc PowerShell và điều hướng đến thư mục chứa file docker-
compose.yml, sau đó chạy lệnh sau:
PS C:\Users\hoduc\Documents\DemoWordPress> docker
Sau khi chạy thành công, truy cập vào website đề tiền hành thiết lap website
4.2 _ Triển khai cài đặt CMS (WordPress)
- _ Chọn một ngôn ngữ cho website và nhán Continue
@ _localhost:8080/wp-admin/install.php & @ >
English (United States) Afrikaans
hmcš
Aragonés
Ay al4u ~Ì
waa
dat bế Azerbaycan dili Benapyckaa mosa BbïirapckW SIseTI Bosanski Català Cebuano
eština
Cymraeg Dansk Deutsch Deutsch (Schweiz, Du)
Deutsch (Osterreich) y
Hình 6 Thiết lập ngôn ngữ
Trang 9- Dién tén website, username, passoword và email Sau khi điền xong thông tin, nhắn Install
WordPress
+stallation x v
OQ © localhost:8080/wp-admin/install.php?step=1 eo @ lở) A a
Welcome
Welcome to the famous five-minute WordPress installation process! Just fill in the information below and you'll
be on your way to using the most extendable and powerful personal publishing platform in the world
Information needed
Please provide the following information Do not worry, you can always change these settings later
Site Title DemoWordPress
Username demouser
Usernames can have only alphanumeric characters, spaces, underscores, hyphens, periods, and the @ symbol
Password demopassword
| ee) Important: You will need this password to log in Please store it in a secure location
Confirm Password Confirm use of weak password
Your Email n20dccn018@student.ptithcm.edu.vn
Double-check your email address before continuing
Search engine () Discourage search engines from indexing this site visibility
It is up to search engines to honor this request
Install WordPress
Hình 7 Điền thông tin website
Trang 10- Théng bao install WordPress thành công
‹ e 0 = © localhost:8080/wp-admin/install.php?step=2 CIGA O f& evn =
‘WordPress has been installed Thank you, and enjoy!
Success!
Username demouser
Password Your chosen password
kegln
Hình 8 Thông báo install WordPress thành công
- _ Giao diện website khi truy cập trang web
@®_ localhost.8080 % # @ A DemoWordPress Sample Page
A commitment to innovation and sustainability
Etudes is a pioneering firm that seamlessly merges creativity and
functionality to redefine architectural excellence
Pe a)
Hinh 9 Giao dién website
9
Trang 11- Truy cap vao trang login dé dang nhap
Username or Email Address
demouser
Password
Remember Me
Lost your password?
Go to DemoWordPress
Hình 10 Giao diện trang login
- _ Giao diện trang admin
Hình 11 Giao diện trang login
10
Trang 12- Giao diện trang quản lý các post
# re
Ai bae
Demo b
H
k a
1
Hình 12 Giao diện trang quản lý các post
-_ Giao diện một trang blog
C 1 _ @ loelhostÊ080/?p=6 2 @ A Of own =
%@a £ #® +2 2
DemoWordPress Sample Page
Demo blog 1
Jun 13, 2024 by demouser in Uncategorized
First time demo wordpress blog
Hình 13 Giao diện một trang blog
T1
Trang 134.3 Trién khai cai dat E-Commerce (WooCommerce)
- Tai trang admin, chon Add New Plugin 6 muc Plugins Sau đó gõ tìm kiếm
WooCommerce va nhan Install Now
OWordP ra + New
Add Plugins
Lư»
Search Resuits Featured Popular Recommended Favorites Keyword v || WooCommerce
SIE)
10,000 items 1
lÐ cCommerts
WooCommerce ffĐcowwrnœ WooCommerce Stripe
Pan \s) pearance \ store Detail Payment Gateway
In: ow Moi etaIls
FT
More Details Everything you need to launch an
4 Plugins online store in days and keep it
growing for years From your first sale
Take credit card payments on your Add New Plugin store using Stripe
to millions in revenue, Woo is with
you By WooCommerce
By Automattic
Additional plugins are required
wooCommerce More Details
* *w*w *: 4:11) Last Updated: 3 days ago ***#°?:+`' (s3) Last Updated: 10 hours ago 7+ Million Active Installations v Compatible with your 800,000+ Active Installations v Compatible with your
version of WordPress version of WordPress
~ ae ge ` a A :
- Sau khi cai dat thanh cong nhan Active
fi D ‘lol | + New Howdy, demouser r
Help v
@ Dashboard Add Plugins Upload Plugin
` Posts
Search Results Featured Popular Recommended Favorites Keyword v || WooCommerce
—
10,000 items 1 of 278
| ec
WooCommerce (commence WooCommerce Stripe
` are
Lo > Payment Gateway
More Details
PI Cy
Darel
More Details
v Everything you need to launch an _— online store in days and keep it Take credit card payments on your [TT 1.1 growing for years From your first sale store using Stripe
to millions in revenue, Woo is with
you By WooCommerce
By Automattic
Additional plugins are required WooCommerce More Details
wk wwe 431 Last Updated: 3 days ago *#w*#¿:+': 193 Last Updated: 10 hours ago 7+ Million Active Installations v Compatible with your 800,000+ Active Installations v Compatible with your
version of WordPress version of WordPress Incathnct 2h QA hum arimininlumine nhn? wnnanre—IelMAfdhTARartinn—asrtaateRnlinin—wnacnmmerrslunncammercs nan
12
Trang 14- Tién hanh setup WooCommerce, nhan Set up my store hoac skip guide setup
1:8080/\ in.php?| =wc-ad| L =%2I =- =
‹ œ Q © _bocalhost:8080/wp-admin/admin.php?page-we-admin&ipath=%2Fset | QO A O & own =
Welcome to Woo!
t's great to have you here with us! We'll be guiding you through the setup process - first, answer a few questions to tailor your experience
Set up my store
| agree to share my data to tailor my store set and help mak F
WooCommerce s
experience, get more relevant content,
u can opt out at any time in
s Leam more about usage tracking,
- Cudi cing chon vung và nhân Go to my store
Đ
Where is your business located?
We'll use this information to help you set up payments, shipping, and taxes
Vietnam v
Go to my store
13
Trang 15- Tai day, c6 thẻ cá nhân hoá store theo sở thích
Jowdy, demouser
o @ Preview store
Welcome to DemoWordPress
slow these steps to start selling quickly 0 out of 5 comple š
ĐỒ woocommerce
Home @ Start customizing your store +
| Q) Customize your store
(2 Add your products
(3) Get paid
(4) Collect sales tax
`
View products Howdy, demou
# You're doing great! 4 steps left to get your store up and running Continue setup
Products
Activity Finish setup
Export Commerts Your store does not appear to be using a secure connection We highly recommend serving your entire website over en
HTTPS connection to help keep customer data secure Learn more here
Screen Options v Help v
Products
© Dismiss
o WooCommerce
tse tracy All (1) | Published (1) | Sorting arc All Products Bulk actions ov Apply Select acategory v Filter by product type v Filter by stock status v Filter 1 item
Name SKU Stock Price Categories Tags * Date $ iPhone In stock Jncategori wW Published
zed 2024/06/13
at 11:22 pm
& Name SKU Stock Price Categories Tags * Date ¥ Bulk actions wv | Apply item
14